nuance-ui 0.2.2 → 0.2.6

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.0.0"
   },
-  "version": "0.2.2",
+  "version": "0.2.6",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/avatar/avatar.vue

@@ -1,11 +1,11 @@
 <script setup>
-import { getInitialsColor } from "@nui/components/avatar/_lib/get-initials-color";
 import { useStyleResolver } from "@nui/composals";
 import { createVariantColorResolver, getRadius, getSize } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";
 import { useAvatarGroupState } from "./_lib/context";
 import { getInitials } from "./_lib/get-initials";
+import { getInitialsColor } from "./_lib/get-initials-color";
 import css from "./avatar.module.css";
 const {
   alt,
@@ -54,18 +54,18 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<Box :style :class='css.root' :mod='[{ "within-group": ctx?.withinGroup }, mod]'>
-		<span v-if='!src' :class='css.placeholder' :title='alt'>
-			<slot>
-				<Icon v-if='!src && !name' :name='placeholder' />
-				{{ initials }}
-			</slot>
-		</span>
-		<NuxtImg
-			v-else
-			:src
-			:alt
-			:class='css.image'
-		/>
-	</Box>
+	<Box :style :class='css.root' :mod='[{ "within-group": ctx?.withinGroup }, mod]'>
+		<span v-if='!src' :class='css.placeholder' :title='alt'>
+			<slot>
+				<Icon v-if='!src && !name' :name='placeholder' />
+				{{ initials }}
+			</slot>
+		</span>
+		<NuxtImg
+			v-else
+			:src
+			:alt
+			:class='css.image'
+		/>
+	</Box>
 </template>

package/dist/runtime/components/box.vue

@@ -16,7 +16,7 @@ const _mod = computed(() => {
 </script>
 
 <template>
-	<component :is v-bind='_mod'>
-		<slot />
-	</component>
+	<component :is v-bind='_mod'>
+		<slot />
+	</component>
 </template>

package/dist/runtime/components/combobox/combobox-dropdown.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { getSize } from "@nui/utils";
 import { computed } from "vue";
+import { getSize } from "../../utils";
 import Box from "../box.vue";
 import PopoverDropdown from "../popover/popover-dropdown.vue";
 import css from "./combobox.module.css";
@@ -13,21 +13,21 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<PopoverDropdown :class='$style.dropdown'>
-		<Box
-			:id='store.listId'
-			role='presentation'
-			:class='css.dropdown'
-			:style
-			v-bind='$attrs'
-		>
-			<slot />
-		</Box>
-	</PopoverDropdown>
+	<PopoverDropdown :class='$style.dropdown'>
+		<Box
+			:id='store.listId'
+			role='presentation'
+			:class='css.dropdown'
+			:style
+			v-bind='$attrs'
+		>
+			<slot />
+		</Box>
+	</PopoverDropdown>
 </template>
 
 <style module lang="postcss">
-.dropdown {
-	padding: 0;
-}
+.dropdown {
+	padding: 0;
+}
 </style>

package/dist/runtime/components/combobox/combobox-group.d.vue.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-import type { ComboboxItem, ComboboxItemExt, ComboboxItemGroup, ComboboxItemProps } from './types/index.js';
+import type { ComboboxItemExt, ComboboxItemGroup, ComboboxItemProps } from './types/index.js';
 export interface ComboboxGroupProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends BoxProps, ComboboxItemProps {
     /** Group label */
     label?: string;
@@ -7,9 +7,9 @@ export interface ComboboxGroupProps<Value extends string = string, Ext extends C
 }
 declare const __VLS_export: <Value extends string = string, Ext extends ComboboxItemExt = object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(ComboboxGroupProps<Value, Ext> & {
-        value?: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null;
+        value?: string | string[] | null;
     }) & {
-        "onUpdate:value"?: ((value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null | undefined) => any) | undefined;
+        "onUpdate:value"?: ((value: string | string[] | null | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -19,13 +19,13 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
         label?: (props: {}) => any;
     } & {
         option?: (props: {
-            data: ComboboxItem<Value, Ext>;
+            data: import("./types/index.js").ComboboxItem<any, Ext>;
             checked: boolean;
             withCheckIcon: boolean;
             iconPosition: "left" | "right";
         }) => any;
     };
-    emit: (event: "update:value", value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null | undefined) => void;
+    emit: (event: "update:value", value: string | string[] | null | undefined) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/combobox/combobox-group.vue

@@ -21,29 +21,29 @@ const {
   iconPosition: { type: String, required: false }
 });
 const uid = useId();
-const value = defineModel("value", { type: [Object, Array, null] });
+const value = defineModel("value", { type: [String, Array, null] });
 </script>
 
 <template>
-	<Box :class='css.group' role='group' :aria-labelledby='label ? uid : void 0' :mod>
-		<div v-if='label || $slots?.label' :id='uid' :class='css.groupLabel'>
-			<slot name='label'>
-				{{ label }}
-			</slot>
-		</div>
-
-		<ComboboxOption
-			v-for='item in data.items'
-			:key='item.value'
-			:data='item'
-			:icon-position
-			:with-check-icon
-			:check-icon
-			:checked='isValueChecked(value, item)'
-		>
-			<template v-if='$slots.option' #default='props'>
-				<slot name='option' v-bind='props' />
-			</template>
-		</ComboboxOption>
-	</Box>
+	<Box :class='css.group' role='group' :aria-labelledby='label ? uid : void 0' :mod>
+		<div v-if='label || $slots?.label' :id='uid' :class='css.groupLabel'>
+			<slot name='label'>
+				{{ label }}
+			</slot>
+		</div>
+
+		<ComboboxOption
+			v-for='item in data.items'
+			:key='item.value'
+			:data='item'
+			:icon-position
+			:with-check-icon
+			:check-icon
+			:checked='isValueChecked(value, item.value)'
+		>
+			<template v-if='$slots.option' #default='props'>
+				<slot name='option' v-bind='props' />
+			</template>
+		</ComboboxOption>
+	</Box>
 </template>

package/dist/runtime/components/combobox/combobox-group.vue.d.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-import type { ComboboxItem, ComboboxItemExt, ComboboxItemGroup, ComboboxItemProps } from './types/index.js';
+import type { ComboboxItemExt, ComboboxItemGroup, ComboboxItemProps } from './types/index.js';
 export interface ComboboxGroupProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends BoxProps, ComboboxItemProps {
     /** Group label */
     label?: string;
@@ -7,9 +7,9 @@ export interface ComboboxGroupProps<Value extends string = string, Ext extends C
 }
 declare const __VLS_export: <Value extends string = string, Ext extends ComboboxItemExt = object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(ComboboxGroupProps<Value, Ext> & {
-        value?: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null;
+        value?: string | string[] | null;
     }) & {
-        "onUpdate:value"?: ((value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null | undefined) => any) | undefined;
+        "onUpdate:value"?: ((value: string | string[] | null | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -19,13 +19,13 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
         label?: (props: {}) => any;
     } & {
         option?: (props: {
-            data: ComboboxItem<Value, Ext>;
+            data: import("./types/index.js").ComboboxItem<any, Ext>;
             checked: boolean;
             withCheckIcon: boolean;
             iconPosition: "left" | "right";
         }) => any;
     };
-    emit: (event: "update:value", value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null | undefined) => void;
+    emit: (event: "update:value", value: string | string[] | null | undefined) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/combobox/combobox-option.vue

@@ -8,7 +8,7 @@ const {
   data,
   iconPosition = "left",
   checkIcon = "gravity-ui:check",
-  withCheckIcon,
+  withCheckIcon = true,
   mod: _mod,
   checked,
   selected
@@ -26,7 +26,6 @@ defineSlots();
 const { onOptionSubmit } = useComboboxState();
 const mod = computed(() => [
   {
-    [COMBOBOX_ATTRS.option]: true,
     [COMBOBOX_ATTRS.active]: checked,
     [COMBOBOX_ATTRS.selected]: selected,
     [COMBOBOX_ATTRS.disabled]: data?.disabled,
@@ -38,30 +37,26 @@ const mod = computed(() => [
 </script>
 
 <template>
-	<Box
-		:class='css.option'
-		:mod
-		role='option'
-		:aria-selected='checked'
-		@click='() => !data?.disabled && onOptionSubmit?.(data.value, data)'
-	>
-		<slot
-			:with-check-icon
-			:icon-position
-			:data
-			:checked
-		>
-			<Icon
-				v-if='withCheckIcon && iconPosition === "left"'
-				:class='css.optionCheck'
-				:name='data?.icon ?? checkIcon'
-			/>
-			<span>{{ data.label }}</span>
-			<Icon
-				v-if='withCheckIcon && iconPosition === "right"'
-				:class='css.optionCheck'
-				:name='data?.icon ?? checkIcon'
-			/>
-		</slot>
-	</Box>
+	<Box
+		:class='css.option'
+		data-combobox-option
+		:mod
+		role='option'
+		:aria-selected='checked'
+		@mousedown='() => !data?.disabled && onOptionSubmit?.(data.value, data)'
+	>
+		<slot :with-check-icon :icon-position :data :checked>
+			<Icon
+				v-if='checked && withCheckIcon && iconPosition === "left"'
+				:class='css.optionCheck'
+				:name='data?.icon ?? checkIcon'
+			/>
+			<span>{{ data.label }}</span>
+			<Icon
+				v-if='checked && withCheckIcon && iconPosition === "right"'
+				:class='css.optionCheck'
+				:name='data?.icon ?? checkIcon'
+			/>
+		</slot>
+	</Box>
 </template>

package/dist/runtime/components/combobox/combobox-options-dropdown.d.vue.ts

@@ -1,12 +1,10 @@
 import type { FilterOptionsInput } from './lib/utils/index.js';
-import type { ComboboxItem, ComboboxItemExt, ComboboxParsedItem } from './types/index.js';
+import type { ComboboxItemExt, ComboboxOption } from './types/index.js';
 export interface ComboboxOptionsDropdownProps<Value extends string = string, Ext extends ComboboxItemExt = object> {
-    data: ComboboxParsedItem<Value, Ext>[];
-    filter?: (input: FilterOptionsInput<Value, Ext>) => ComboboxParsedItem<Value, Ext>[];
+    data: ComboboxOption<Value, Ext>[];
+    filter?: (input: FilterOptionsInput<Value, Ext>) => ComboboxOption<Value, Ext>[];
     limit?: number;
-    withScrollArea?: boolean;
     maxDropdownHeight?: number | string;
-    hiddenWhenEmpty?: boolean;
     filterOptions?: boolean;
     nothingFoundMessage?: string;
     labelId: string | undefined;
@@ -17,9 +15,9 @@ export interface ComboboxOptionsDropdownProps<Value extends string = string, Ext
 declare const __VLS_export: <Value extends string = string, Ext extends ComboboxItemExt = object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(ComboboxOptionsDropdownProps<Value, Ext> & {
         search?: string | undefined;
-        modelValue?: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null;
+        modelValue?: string | string[] | null;
     }) & {
-        "onUpdate:modelValue"?: ((value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | string[] | null | undefined) => any) | undefined;
         "onUpdate:search"?: ((value: string | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -27,7 +25,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: ((event: "update:modelValue", value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null | undefined) => void) & ((event: "update:search", value: string | undefined) => void);
+    emit: ((event: "update:modelValue", value: string | string[] | null | undefined) => void) & ((event: "update:search", value: string | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/combobox/combobox-options-dropdown.vue

@@ -4,7 +4,7 @@ import ComboboxDropdown from "./combobox-dropdown.vue";
 import ComboboxEmpty from "./combobox-empty.vue";
 import ComboboxGroup from "./combobox-group.vue";
 import ComboboxOptionList from "./combobox-option-list.vue";
-import ComboboxOption from "./combobox-option.vue";
+import ComboboxOptions from "./combobox-option.vue";
 import { defaultOptionsFilter, isEmptyComboboxData, isOptionsGroup, isValueChecked } from "./lib/utils";
 const {
   data,
@@ -20,9 +20,7 @@ const {
   data: { type: Array, required: true },
   filter: { type: Function, required: false },
   limit: { type: Number, required: false },
-  withScrollArea: { type: Boolean, required: false },
   maxDropdownHeight: { type: [Number, String], required: false },
-  hiddenWhenEmpty: { type: Boolean, required: false },
   filterOptions: { type: Boolean, required: false },
   nothingFoundMessage: { type: String, required: false },
   labelId: { type: null, required: true },
@@ -31,7 +29,7 @@ const {
   checkIcon: { type: String, required: false }
 });
 const search = defineModel("search", { type: null });
-const value = defineModel({ type: [Object, Array, null] });
+const value = defineModel({ type: [String, Array, null] });
 const isEmpty = computed(() => isEmptyComboboxData(data));
 const filteredData = computed(() => typeof search.value === "string" ? (filter || defaultOptionsFilter)({
   options: data,
@@ -41,32 +39,33 @@ const filteredData = computed(() => typeof search.value === "string" ? (filter |
 </script>
 
 <template>
-	<ComboboxDropdown data-composed>
-		<ComboboxOptionList :labelled-by='labelId' v-bind='$attrs'>
-			<template
-				v-for='item in filteredData'
-				:key='isOptionsGroup(item) ? item.group : item?.value'
-			>
-				<ComboboxGroup
-					v-if='isOptionsGroup(item)'
-					v-model:value='value'
-					:data='item'
-					:with-check-icon
-					:icon-position
-					:check-icon
-				/>
-				<ComboboxOption
-					v-else
-					:data='item'
-					:with-check-icon
-					:icon-position
-					:check-icon
-					:checked='isValueChecked(value, item)'
-				/>
-			</template>
-			<ComboboxEmpty v-if='isEmpty'>
-				{{ nothingFoundMessage }}
-			</ComboboxEmpty>
-		</ComboboxOptionList>
-	</ComboboxDropdown>
+	<ComboboxDropdown>
+		<ComboboxOptionList :labelled-by='labelId' v-bind='$attrs'>
+			<template
+				v-for='item in filteredData'
+				:key='isOptionsGroup(item) ? item.group : item?.value'
+			>
+				<ComboboxGroup
+					v-if='isOptionsGroup(item)'
+					v-model:value='value'
+					:label='item.group'
+					:data='item'
+					:with-check-icon
+					:icon-position
+					:check-icon
+				/>
+				<ComboboxOptions
+					v-else
+					:data='item'
+					:with-check-icon
+					:icon-position
+					:check-icon
+					:checked='isValueChecked(value, item.value)'
+				/>
+			</template>
+			<ComboboxEmpty v-if='isEmpty'>
+				{{ nothingFoundMessage }}
+			</ComboboxEmpty>
+		</ComboboxOptionList>
+	</ComboboxDropdown>
 </template>

package/dist/runtime/components/combobox/combobox-options-dropdown.vue.d.ts

@@ -1,12 +1,10 @@
 import type { FilterOptionsInput } from './lib/utils/index.js';
-import type { ComboboxItem, ComboboxItemExt, ComboboxParsedItem } from './types/index.js';
+import type { ComboboxItemExt, ComboboxOption } from './types/index.js';
 export interface ComboboxOptionsDropdownProps<Value extends string = string, Ext extends ComboboxItemExt = object> {
-    data: ComboboxParsedItem<Value, Ext>[];
-    filter?: (input: FilterOptionsInput<Value, Ext>) => ComboboxParsedItem<Value, Ext>[];
+    data: ComboboxOption<Value, Ext>[];
+    filter?: (input: FilterOptionsInput<Value, Ext>) => ComboboxOption<Value, Ext>[];
     limit?: number;
-    withScrollArea?: boolean;
     maxDropdownHeight?: number | string;
-    hiddenWhenEmpty?: boolean;
     filterOptions?: boolean;
     nothingFoundMessage?: string;
     labelId: string | undefined;
@@ -17,9 +15,9 @@ export interface ComboboxOptionsDropdownProps<Value extends string = string, Ext
 declare const __VLS_export: <Value extends string = string, Ext extends ComboboxItemExt = object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(ComboboxOptionsDropdownProps<Value, Ext> & {
         search?: string | undefined;
-        modelValue?: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null;
+        modelValue?: string | string[] | null;
     }) & {
-        "onUpdate:modelValue"?: ((value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | string[] | null | undefined) => any) | undefined;
         "onUpdate:search"?: ((value: string | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -27,7 +25,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: ((event: "update:modelValue", value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null | undefined) => void) & ((event: "update:search", value: string | undefined) => void);
+    emit: ((event: "update:modelValue", value: string | string[] | null | undefined) => void) & ((event: "update:search", value: string | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/combobox/combobox-root.d.vue.ts

@@ -6,8 +6,6 @@ export interface ComboboxProps extends PopoverProps {
     store?: ComboboxStore;
     /** Determines whether arrow key presses should loop though items (first to last and last to first), `true` by default */
     loop?: boolean;
-    /** `behavior` passed down to `element.scrollIntoView`, `'instant'` by default */
-    scrollBehavior?: ScrollBehavior;
     /** Controls items `font-size` and `padding` @default `'sm'` */
     size?: NuanceSize;
     /** Controls `padding` of the dropdown @default `4` */

package/dist/runtime/components/combobox/combobox-root.vue

@@ -3,7 +3,6 @@ import Popover from "../popover/popover.vue";
 import { useProvideComboboxState } from "./lib/context";
 import { useCombobox } from "./lib/use-combobox";
 const {
-  scrollBehavior = "instant",
   loop = true,
   readOnly = false,
   size = "sm",
@@ -13,7 +12,6 @@ const {
 } = defineProps({
   store: { type: Object, required: false },
   loop: { type: Boolean, required: false },
-  scrollBehavior: { type: null, required: false },
   size: { type: String, required: false },
   dropdownPadding: { type: String, required: false },
   readOnly: { type: Boolean, required: false },
@@ -35,7 +33,7 @@ const emit = defineEmits(["clear", "select", "open", "close", "submit"]);
 const opened = defineModel("open", { type: Boolean, ...{ default: false } });
 const store = _store ?? useCombobox({
   loop,
-  scrollBehavior,
+  scrollBehavior: "instant",
   onSelect: (ix) => emit("select", ix),
   onClear: () => emit("clear"),
   onOpenDropdown: (source) => emit("open", source),

package/dist/runtime/components/combobox/combobox-root.vue.d.ts

@@ -6,8 +6,6 @@ export interface ComboboxProps extends PopoverProps {
     store?: ComboboxStore;
     /** Determines whether arrow key presses should loop though items (first to last and last to first), `true` by default */
     loop?: boolean;
-    /** `behavior` passed down to `element.scrollIntoView`, `'instant'` by default */
-    scrollBehavior?: ScrollBehavior;
     /** Controls items `font-size` and `padding` @default `'sm'` */
     size?: NuanceSize;
     /** Controls `padding` of the dropdown @default `4` */

package/dist/runtime/components/combobox/combobox-target.vue

@@ -26,7 +26,7 @@ const { store: { targetRef } } = useComboboxState();
 </script>
 
 <template>
-	<PopoverTarget ref='targetRef' v-bind='aria' disabled>
+	<PopoverTarget ref='targetRef' v-bind='aria' disable>
 		<slot />
 	</PopoverTarget>
 </template>

package/dist/runtime/components/combobox/combobox.module.css

@@ -1 +1 @@
-.dropdown{--combobox-padding:.25rem;padding:var(--combobox-padding)}.dropdown:has([data-scrollbar]) .search{max-width:calc(100% + var(--combobox-padding))}.dropdown[data-composed]{padding-inline-end:0}.dropdown[data-hidden]{display:none}.dropdown,.options{--combobox-option-padding-xs:rem(4px) rem(8px);--combobox-option-padding-sm:rem(6px) rem(10px);--combobox-option-padding-md:rem(8px) rem(12px);--combobox-option-padding-lg:rem(10px) rem(16px);--combobox-option-padding-xl:rem(14px) rem(20px);--combobox-option-padding:var(--combobox-option-padding-sm)}.option{align-items:center;background-color:transparent;border-radius:var(--radius-default);color:inherit;cursor:pointer;display:flex;font-size:var(--combobox-option-fz,var(--font-size-sm));gap:8px;overflow-wrap:break-word;padding:var(--combobox-option-padding)}.option:where([data-combobox-selected]){background-color:var(--color-primary-filled);color:var(--color-white)}.option:where([data-combobox-disabled]){cursor:not-allowed;opacity:.35}.option:where([data-reverse]){justify-content:space-between}.option{@mixin hover{&:where(:not([data-combobox-selected],[data-combobox-disabled])){@mixin where-light{background-color:var(--color-gray-0)}@mixin where-dark{background-color:var(--color-dark-7)}}}}.optionCheck{height:.8em;min-width:.8em;opacity:.4;width:.8em}:where([data-combobox-selected]) .optionCheck{opacity:1}.search{border-end-end-radius:0;border-end-start-radius:0;border-inline-width:0;border-top-width:0;margin-inline:calc(var(--combobox-padding)*-1);margin-bottom:var(--combobox-padding);margin-top:calc(var(--combobox-padding)*-1);position:relative;width:calc(100% + var(--combobox-padding)*2)}.search,.search:focus{@mixin where-light{border-color:var(--color-gray-2)}@mixin where-dark{border-color:var(--color-dark-4)}}.search{@mixin where-light{background-color:var(--color-white)}}.search{@mixin where-dark{background-color:var(--color-dark-7)}}.empty{color:var(--color-dimmed);font-size:var(--combobox-option-fz,var(--font-size-sm));padding:var(--combobox-option-padding);text-align:center}.footer,.header{border:0 solid transparent;font-size:var(--combobox-option-fz,var(--font-size-sm));margin-inline:calc(var(--combobox-padding)*-1);padding:var(--combobox-option-padding);@mixin where-light{border-color:var(--color-gray-2)}@mixin where-dark{border-color:var(--color-dark-4)}}.footer{border-top-width:1px;margin-bottom:calc(var(--combobox-padding)*-1);margin-top:var(--combobox-padding)}.header{border-bottom-width:1px;margin-bottom:var(--combobox-padding);margin-top:calc(var(--combobox-padding)*-1)}.group:has(.groupLabel:only-child){display:none}.groupLabel{align-items:center;color:var(--color-dimmed);display:flex;font-size:calc(var(--combobox-option-fz, var(--font-size-sm))*.85);font-weight:500;padding:var(--combobox-option-padding);position:relative}.groupLabel:after{content:"";flex:1;height:1px;inset-inline:0;margin-inline-start:var(--spacing-xs);@mixin where-light{background-color:var(--color-gray-2)}@mixin where-dark{background-color:var(--color-dark-4)}}.groupLabel:only-child{display:none}.chevron{--combobox-chevron-size-xs:rem(14px);--combobox-chevron-size-sm:rem(18px);--combobox-chevron-size-md:rem(20px);--combobox-chevron-size-lg:rem(24px);--combobox-chevron-size-xl:rem(28px);--combobox-chevron-size:var(--combobox-chevron-size-sm);@mixin where-light{--_combobox-chevron-color:var(--combobox-chevron-color,var(--color-gray-6))}@mixin where-dark{--_combobox-chevron-color:var(--combobox-chevron-color,var(--color-dark-3))}color:var(--_combobox-chevron-color);height:var(--combobox-chevron-size);width:var(--combobox-chevron-size)}.chevron:where([data-error]){color:var(--combobox-chevron-color,var(--color-error))}
+.dropdown{--combobox-padding:.25rem;padding:var(--combobox-padding)}.dropdown:has([data-scrollbar]) .search{max-width:calc(100% + var(--combobox-padding))}.dropdown[data-hidden]{display:none}.dropdown,.options{--combobox-option-padding-xs:rem(4px) rem(8px);--combobox-option-padding-sm:rem(6px) rem(10px);--combobox-option-padding-md:rem(8px) rem(12px);--combobox-option-padding-lg:rem(10px) rem(16px);--combobox-option-padding-xl:rem(14px) rem(20px);--combobox-option-padding:var(--combobox-option-padding-sm)}.option{align-items:center;background-color:transparent;border-radius:var(--radius-default);color:inherit;cursor:pointer;display:flex;font-size:var(--combobox-option-fz,var(--font-size-sm));gap:8px;overflow-wrap:break-word;padding:var(--combobox-option-padding)}.option:where([data-combobox-selected]){background-color:var(--color-primary-filled);color:var(--color-white)}.option:where([data-combobox-disabled]){cursor:not-allowed;opacity:.35}.option:where([data-reverse]){justify-content:space-between}.option{@mixin hover{&:where(:not([data-combobox-selected],[data-combobox-disabled])){@mixin where-light{background-color:var(--color-gray-0)}@mixin where-dark{background-color:var(--color-dark-7)}}}}.optionCheck{height:.8em;min-width:.8em;opacity:.4;width:.8em}:where([data-combobox-selected]) .optionCheck{opacity:1}.search{border-end-end-radius:0;border-end-start-radius:0;border-inline-width:0;border-top-width:0;margin-inline:calc(var(--combobox-padding)*-1);margin-bottom:var(--combobox-padding);margin-top:calc(var(--combobox-padding)*-1);position:relative;width:calc(100% + var(--combobox-padding)*2)}.search,.search:focus{@mixin where-light{border-color:var(--color-gray-2)}@mixin where-dark{border-color:var(--color-dark-4)}}.search{@mixin where-light{background-color:var(--color-white)}}.search{@mixin where-dark{background-color:var(--color-dark-7)}}.empty{color:var(--color-dimmed);font-size:var(--combobox-option-fz,var(--font-size-sm));padding:var(--combobox-option-padding);text-align:center}.footer,.header{border:0 solid transparent;font-size:var(--combobox-option-fz,var(--font-size-sm));margin-inline:calc(var(--combobox-padding)*-1);padding:var(--combobox-option-padding);@mixin where-light{border-color:var(--color-gray-2)}@mixin where-dark{border-color:var(--color-dark-4)}}.footer{border-top-width:1px;margin-bottom:calc(var(--combobox-padding)*-1);margin-top:var(--combobox-padding)}.header{border-bottom-width:1px;margin-bottom:var(--combobox-padding);margin-top:calc(var(--combobox-padding)*-1)}.group:has(.groupLabel:only-child){display:none}.groupLabel{align-items:center;color:var(--color-dimmed);display:flex;font-size:calc(var(--combobox-option-fz, var(--font-size-sm))*.85);font-weight:500;padding:var(--combobox-option-padding);position:relative}.groupLabel:after{content:"";flex:1;height:1px;inset-inline:0;margin-inline-start:var(--spacing-xs);@mixin where-light{background-color:var(--color-gray-2)}@mixin where-dark{background-color:var(--color-dark-4)}}.groupLabel:only-child{display:none}.chevron{--combobox-chevron-size-xs:rem(14px);--combobox-chevron-size-sm:rem(18px);--combobox-chevron-size-md:rem(20px);--combobox-chevron-size-lg:rem(24px);--combobox-chevron-size-xl:rem(28px);--combobox-chevron-size:var(--combobox-chevron-size-sm);@mixin where-light{--_combobox-chevron-color:var(--combobox-chevron-color,var(--color-gray-6))}@mixin where-dark{--_combobox-chevron-color:var(--combobox-chevron-color,var(--color-dark-3))}color:var(--_combobox-chevron-color);height:var(--combobox-chevron-size);width:var(--combobox-chevron-size)}.chevron:where([data-error]){color:var(--combobox-chevron-color,var(--color-error))}

package/dist/runtime/components/combobox/lib/use-combobox/use-combobox.js

@@ -10,7 +10,14 @@ import {
   selectPrevOption,
   updateSelectedOptionIx
 } from "./handlers.js";
-export function useCombobox({ onSelect, onClear, onCloseDropdown, onOpenDropdown, opened, ..._options }) {
+export function useCombobox({
+  onSelect,
+  onClear,
+  onCloseDropdown,
+  onOpenDropdown,
+  opened,
+  ..._options
+}) {
   const listId = useId();
   const targetRef = shallowRef(null);
   const searchRef = shallowRef(null);

package/dist/runtime/components/combobox/lib/use-combobox-data/get-parsed-combobox-data.d.ts

@@ -1,2 +1,2 @@
-import type { ComboboxData, ComboboxItemExt, ComboboxParsedItem } from '../../types/index.js';
-export declare function getParsedComboboxData<Value extends string = string, Ext extends ComboboxItemExt = object>(data: ComboboxData<Value, Ext> | undefined): ComboboxParsedItem<Value, Ext>[];
+import type { ComboboxData, ComboboxItemExt, ComboboxOption } from '../../types/index.js';
+export declare function getParsedComboboxData<Value extends string = string, Ext extends ComboboxItemExt = object>(data: ComboboxData<Value, Ext> | undefined): ComboboxOption<Value, Ext>[];

package/dist/runtime/components/combobox/lib/use-combobox-data/get-parsed-combobox-data.js

@@ -1,6 +1,7 @@
+import { isNumber } from "es-toolkit";
 import { isOptionsGroup } from "../utils/index.js";
 function parseItem(item) {
-  if (typeof item === "number")
+  if (isNumber(item))
     return { value: item.toString(), label: item.toString() };
   if (isOptionsGroup(item)) {
     return {

package/dist/runtime/components/combobox/lib/use-combobox-data/use-combobox-data.d.ts

@@ -1,7 +1,7 @@
-import type { ComboboxData, ComboboxItem, ComboboxItemExt, ComboboxParsedItem } from '../../types/index.js';
-export declare function getOptionsLockup<Value extends string = string, Ext extends ComboboxItemExt = object>(options: ComboboxParsedItem<Value, Ext>[]): Record<string, ComboboxItem<Value, Ext>>;
-export declare function getLabelsLockup<Value extends string = string, Ext extends ComboboxItemExt = object>(options: ComboboxParsedItem<Value, Ext>[]): Record<string, string>;
+import type { ComboboxData, ComboboxItem, ComboboxItemExt, ComboboxOption } from '../../types/index.js';
+export declare function getOptionsLockup<Value extends string = string, Ext extends ComboboxItemExt = object>(options: ComboboxOption<Value, Ext>[]): Record<string, ComboboxItem<Value, Ext>>;
+export declare function getLabelsLockup<Value extends string = string, Ext extends ComboboxItemExt = object>(options: ComboboxOption<Value, Ext>[]): Record<string, ComboboxOption<Value, Ext>>;
 export declare function useComboboxData<Value extends string = string, Ext extends ComboboxItemExt = object>(data: ComboboxData<Value, Ext>): {
-    parsed: import("vue").ComputedRef<ComboboxParsedItem<Value, Ext>[]>;
+    parsed: import("vue").ComputedRef<ComboboxOption<Value, Ext>[]>;
     options: import("vue").ComputedRef<Record<string, ComboboxItem<Value, Ext>>>;
 };

package/dist/runtime/components/combobox/lib/use-combobox-data/use-combobox-data.js

@@ -1,8 +1,9 @@
 import { computed } from "vue";
+import { isOptionsGroup } from "../utils/index.js";
 import { getParsedComboboxData } from "./get-parsed-combobox-data.js";
 export function getOptionsLockup(options) {
   return options.reduce((acc, item) => {
-    if ("group" in item)
+    if (isOptionsGroup(item))
       return { ...acc, ...getOptionsLockup(item.items) };
     acc[item.value] = item;
     return acc;
@@ -10,7 +11,7 @@ export function getOptionsLockup(options) {
 }
 export function getLabelsLockup(options) {
   return options.reduce((acc, item) => {
-    if ("group" in item)
+    if (isOptionsGroup(item))
       return { ...acc, ...getLabelsLockup(item.items) };
     acc[item.label] = item;
     return acc;

package/dist/runtime/components/combobox/lib/utils/default-option-filter.d.ts

@@ -1,7 +1,7 @@
-import type { ComboboxItemExt, ComboboxParsedItem } from '../../types/index.js';
+import type { ComboboxItemExt, ComboboxOption } from '../../types/index.js';
 export interface FilterOptionsInput<Value extends string = string, Ext extends ComboboxItemExt = object> {
-    options: ComboboxParsedItem<Value, Ext>[];
+    options: ComboboxOption<Value, Ext>[];
     search: string;
     limit: number;
 }
-export declare function defaultOptionsFilter<Value extends string = string, Ext extends ComboboxItemExt = object>({ options, search, limit, }: FilterOptionsInput<Value, Ext>): ComboboxParsedItem<Value, Ext>[];
+export declare function defaultOptionsFilter<Value extends string = string, Ext extends ComboboxItemExt = object>({ options, search, limit, }: FilterOptionsInput<Value, Ext>): ComboboxOption<Value, Ext>[];

package/dist/runtime/components/combobox/lib/utils/default-option-filter.js

@@ -1,4 +1,4 @@
-import { isOptionsGroup } from "./is-options-group.js";
+import { isOptionsGroup } from "./is-guards.js";
 export function defaultOptionsFilter({
   options,
   search,

package/dist/runtime/components/combobox/lib/utils/index.d.ts

@@ -1,5 +1,4 @@
-import type { ComboboxItem, ComboboxItemExt } from '../../types/index.js';
 export * from './default-option-filter.js';
 export { isEmptyComboboxData } from './is-empty-combobox-data.js';
-export { isOptionsGroup } from './is-options-group.js';
-export declare function isValueChecked<Value extends string = string, Ext extends ComboboxItemExt = object>(value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | undefined | null, optionValue: ComboboxItem<Value, Ext>): boolean;
+export { isOptionsGroup } from './is-guards.js';
+export declare function isValueChecked(value: string | string[] | null | undefined, optionValue: string): boolean;

package/dist/runtime/components/combobox/lib/utils/index.js

@@ -1,6 +1,6 @@
 export * from "./default-option-filter.js";
 export { isEmptyComboboxData } from "./is-empty-combobox-data.js";
-export { isOptionsGroup } from "./is-options-group.js";
+export { isOptionsGroup } from "./is-guards.js";
 export function isValueChecked(value, optionValue) {
-  return Array.isArray(value) ? value.some(({ value: value2 }) => value2 === optionValue.value) : value?.value === optionValue.value;
+  return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;
 }

package/dist/runtime/components/combobox/lib/utils/is-empty-combobox-data.d.ts

@@ -1,2 +1,2 @@
-import type { ComboboxParsedItem } from '../../types/index.js';
-export declare function isEmptyComboboxData(data: ComboboxParsedItem[]): boolean;
+import type { ComboboxOption } from '../../types/index.js';
+export declare function isEmptyComboboxData(data: ComboboxOption[]): boolean;

package/dist/runtime/components/combobox/lib/utils/is-guards.d.ts

@@ -0,0 +1,2 @@
+import type { ComboboxItemExt, ComboboxItemGroup, ComboboxOption } from '../../types/index.js';
+export declare function isOptionsGroup<Value extends string = string, Ext extends ComboboxItemExt = object>(item: ComboboxOption<Value, Ext>): item is ComboboxItemGroup<Value, Ext>;

package/dist/runtime/components/combobox/types/item.d.ts

@@ -8,15 +8,10 @@ export type ComboboxItemExt = Omit<object, keyof BaseComboboxFields>;
 export type ComboboxItem<Value extends string = string, Ext extends ComboboxItemExt = object> = BaseComboboxFields & {
     value: Value;
 } & Ext;
-export interface ComboboxParsedItemGroup<Value extends string = string, Ext extends ComboboxItemExt = object> {
+export interface ComboboxItemGroup<_Value extends string = string, Ext extends ComboboxItemExt = object> {
     group: string;
     icon?: string;
-    items: ComboboxItem<Value, Ext>[];
-}
-export type ComboboxParsedItem<Value extends string = string, Ext extends ComboboxItemExt = object> = ComboboxItem<Value, Ext> | ComboboxParsedItemGroup<Value, Ext>;
-export interface ComboboxItemGroup<Value extends string = string, Ext extends ComboboxItemExt = object> {
-    group: string;
-    icon?: string;
-    items: ComboboxItem<Value, Ext>[];
+    items: ComboboxItem<any, Ext>[];
 }
+export type ComboboxOption<Value extends string = string, Ext extends ComboboxItemExt = object> = ComboboxItem<Value, Ext> | ComboboxItemGroup<Value, Ext>;
 export {};

package/dist/runtime/components/select/select.d.vue.ts

@@ -1,9 +1,11 @@
-import type { ComboboxData, ComboboxItem, ComboboxItemExt } from '../combobox/index.js';
+import type { ComboboxData, ComboboxItemExt } from '../combobox/index.js';
 import type { TextInputProps } from '../input/index.js';
 export interface SelectProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends Omit<TextInputProps, 'modelValue' | 'multiline' | 'resize' | 'is' | 'id'> {
-    data: ComboboxData<Value, Ext>;
+    options: ComboboxData<Value, Ext>;
     /** Determines whether the select should be searchable @default `false` */
     searchable?: boolean;
+    /** If set, multiple options can be selected @default `false` */
+    multiple?: boolean;
     /** If set, the check icon is displayed near the selected option label @default `true` */
     withCheckIcon?: boolean;
     /** Position of the check icon relative to the option label @default `'left'` */
@@ -12,23 +14,29 @@ export interface SelectProps<Value extends string = string, Ext extends Combobox
     nothingFoundMessage?: string;
     /** If set, it becomes possible to deselect value by clicking on the selected option @default `true` */
     allowDeselect?: boolean;
+    /** If set, the dropdown will close after an option is selected @default `!multiple` */
+    closeOnSelect?: boolean;
     /** If set, the clear button is displayed in the right section when the component has value @default `false` */
+    /** Icon displayed in the left section by default */
+    icon?: string;
     limit?: number;
-    /** Props passed down to the underlying `ScrollArea` component in the dropdown */
     /** Input autocomplete attribute */
     autoComplete?: string;
 }
 declare const __VLS_export: <Value extends string = string, Ext extends ComboboxItemExt = object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(SelectProps<Value, Ext> & {
+        /** Dropdown opened state */
         open?: boolean;
-        modelValue?: ComboboxItem<Value, Ext> | null;
+        /** Value handler */
+        modelValue?: string | string[] | null;
+        /** Search handler */
         search?: string;
     }) & {
         onSelect?: ((args_0: number) => any) | undefined;
         onClear?: (() => any) | undefined;
         onClose?: ((args_0: import("..").ComboboxDropdownEventSource) => any) | undefined;
-        onSubmit?: ((args_0: string, args_1: ComboboxItem) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: ComboboxItem<Value, Ext> | null) => any) | undefined;
+        onSubmit?: ((args_0: string, args_1: import("..").ComboboxItem) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | string[] | null) => any) | undefined;
         onOpen?: ((args_0: import("..").ComboboxDropdownEventSource) => any) | undefined;
         "onUpdate:search"?: ((value: string) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
@@ -38,6 +46,11 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
+        selection?: (props: {
+            value: string | string[] | null;
+            display: string;
+        }) => any;
+    } & {
         label?: (props: {}) => any;
     } & {
         description?: (props: {}) => any;
@@ -48,7 +61,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     } & {
         rightSection?: (props: {}) => any;
     };
-    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
+    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: import("..").ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: string | string[] | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/select/select.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { nextTick, watch } from "vue";
+import { computed, nextTick, ref, watch } from "vue";
 import { useCombobox, useComboboxData } from "../combobox";
 import ComboboxOptionsDropdown from "../combobox/combobox-options-dropdown.vue";
 import ComboboxRoot from "../combobox/combobox-root.vue";
@@ -7,25 +7,31 @@ import ComboboxTarget from "../combobox/combobox-target.vue";
 import TextInput from "../input/text-input.vue";
 import ButtonInput from "../input/ui/button-input.vue";
 const {
-  data,
+  options: data,
   disabled,
   searchable = false,
+  multiple = false,
   rightSectionPE = "none",
   readonly = false,
   allowDeselect = false,
+  closeOnSelect,
   autoComplete = "off",
+  icon,
   limit,
   iconPosition,
   nothingFoundMessage,
-  withCheckIcon,
+  withCheckIcon = true,
   ...rest
 } = defineProps({
-  data: { type: Array, required: true },
+  options: { type: Array, required: true },
   searchable: { type: Boolean, required: false },
+  multiple: { type: Boolean, required: false },
   withCheckIcon: { type: Boolean, required: false },
   iconPosition: { type: String, required: false },
   nothingFoundMessage: { type: String, required: false },
   allowDeselect: { type: Boolean, required: false },
+  closeOnSelect: { type: Boolean, required: false },
+  icon: { type: String, required: false },
   limit: { type: Number, required: false },
   autoComplete: { type: String, required: false },
   withAria: { type: Boolean, required: false },
@@ -44,7 +50,8 @@ const {
 });
 const emit = defineEmits(["clear", "select", "open", "close", "submit"]);
 const opened = defineModel("open", { type: Boolean, ...{ default: false } });
-const value = defineModel({ type: [Object, null], ...{ default: null } });
+const value = defineModel({ type: [String, Array, null], ...{ default: null } });
+const search = defineModel("search", { type: String, ...{ default: "" } });
 const { parsed, options } = useComboboxData(data);
 const store = useCombobox({
   opened,
@@ -54,6 +61,8 @@ const store = useCombobox({
   onClear: () => emit("clear"),
   onOpenDropdown: (source) => {
     emit("open", source);
+    if (searchable)
+      search.value = "";
     store.updateSelectedOptionIx("active", { scrollIntoView: true });
   },
   onCloseDropdown: (source) => {
@@ -61,81 +70,106 @@ const store = useCombobox({
     nextTick(() => store.resetSelectedOption());
   }
 });
-const search = defineModel("search", { type: String, ...{ default: "" } });
 watch(search, () => nextTick(() => store.resetSelectedOption()));
+const display = computed(() => {
+  const v = value.value;
+  if (multiple && Array.isArray(v))
+    return v.map((val) => options.value[val]?.label ?? val).join(", ");
+  if (v && typeof v === "string")
+    return options.value[v]?.label ?? v;
+  return "";
+});
+const focused = ref(false);
+const inputValue = computed({
+  get: () => searchable && focused.value ? search.value : display.value,
+  set: (val) => {
+    search.value = val;
+  }
+});
+function onSubmit(val) {
+  const shouldClose = closeOnSelect ?? !multiple;
+  if (multiple) {
+    const current = Array.isArray(value.value) ? value.value : [];
+    value.value = current.includes(val) ? current.filter((v) => v !== val) : [...current, val];
+    search.value = "";
+  } else {
+    const nextValue = allowDeselect && value.value === val ? null : val;
+    value.value = options.value[val] ? nextValue : null;
+    search.value = "";
+  }
+  if (shouldClose)
+    store.closeDropdown();
+}
 </script>
 
 <template>
-	<ComboboxRoot
-		v-model:open='opened'
-		width='target'
-		:store
+	<ComboboxRoot
+		v-model:open='opened'
+		width='target'
+		:store
 		@submit='(val, option) => {
   $emit("submit", val, option);
-  const optionsLockup = allowDeselect ? options[val]?.value === value?.value ? null : options[val] : options[val];
-  const nextValue = optionsLockup ? optionsLockup : null;
-  value = nextValue;
-  search = nextValue?.label ?? "";
-  store.closeDropdown();
-}'
-	>
-		<ComboboxTarget :target-type='searchable ? "input" : "button"' :auto-complete>
-			<component
-				:is='searchable ? TextInput : ButtonInput'
-				:id='store.listId'
-				v-bind='{ ...rest, ...$attrs }'
-				v-model='search'
-				:disabled
-				:right-section-p-e
-				:readonly='readonly || !searchable'
-				:class='$style.input'
-				@blur='() => {
-  searchable && store.closeDropdown();
-  search = value?.label ?? "";
-}'
-				@click.prevent.stop='() => searchable ? store.openDropdown() : store.toggleDropdown()'
-			>
-				{{ value?.label ?? value?.value ?? null }}
-
-				<template v-if='$slots?.label' #label>
-					<slot name='label' />
-				</template>
-				<template v-if='$slots?.description' #description>
-					<slot name='description' />
-				</template>
-				<template v-if='$slots?.error' #error>
-					<slot name='error' />
-				</template>
-
-				<template v-if='$slots.leftSection || value?.icon' #leftSection>
-					<slot name='leftSection'>
-						<Icon v-if='value?.icon' :name='value?.icon' />
-					</slot>
-				</template>
-				<template #rightSection>
-					<slot name='rightSection'>
-						<Icon name='gravity-ui:chevrons-expand-vertical' />
-					</slot>
-				</template>
-			</component>
-		</ComboboxTarget>
-		<ComboboxOptionsDropdown
-			v-model='value'
-			:data='parsed'
-			:limit
-			:with-check-icon
-			:icon-position
-			:nothing-found-message
-			:aria-label='store.listId'
-			:label-id='store.listId'
-		/>
-	</ComboboxRoot>
+  onSubmit(val);
+}'
+	>
+		<ComboboxTarget :target-type='searchable ? "input" : "button"' :auto-complete>
+			<component
+				:is='searchable ? TextInput : ButtonInput'
+				:id='store.listId'
+				v-bind='{ ...rest, ...$attrs }'
+				v-model='inputValue'
+				:disabled
+				:right-section-p-e
+				:readonly='readonly || !searchable'
+				:class='$style.input'
+				@focus='focused = true'
+				@blur='focused = false'
+				@click.prevent.stop='() => searchable ? store.openDropdown() : store.toggleDropdown()'
+			>
+				<slot v-if='display' name='selection' :value='value' :display='display'>
+					{{ display }}
+				</slot>
+
+				<template v-if='$slots?.label' #label>
+					<slot name='label' />
+				</template>
+				<template v-if='$slots?.description' #description>
+					<slot name='description' />
+				</template>
+				<template v-if='$slots?.error' #error>
+					<slot name='error' />
+				</template>
+
+				<template v-if='$slots.leftSection || icon' #leftSection>
+					<slot name='leftSection'>
+						<Icon v-if='icon' :name='icon' />
+					</slot>
+				</template>
+				<template #rightSection>
+					<slot name='rightSection'>
+						<Icon name='gravity-ui:chevrons-expand-vertical' />
+					</slot>
+				</template>
+			</component>
+		</ComboboxTarget>
+		<ComboboxOptionsDropdown
+			v-model='value'
+			v-model:search='search'
+			:data='parsed'
+			:limit
+			:with-check-icon
+			:icon-position
+			:nothing-found-message
+			:aria-label='store.listId'
+			:label-id='store.listId'
+		/>
+	</ComboboxRoot>
 </template>
 
 <style module lang="postcss">
-.input {
-	:where([readonly]) {
-		cursor: pointer;
-	}
-}
+.input {
+	:where([readonly]) {
+		cursor: pointer;
+	}
+}
 </style>

package/dist/runtime/components/select/select.vue.d.ts

@@ -1,9 +1,11 @@
-import type { ComboboxData, ComboboxItem, ComboboxItemExt } from '../combobox/index.js';
+import type { ComboboxData, ComboboxItemExt } from '../combobox/index.js';
 import type { TextInputProps } from '../input/index.js';
 export interface SelectProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends Omit<TextInputProps, 'modelValue' | 'multiline' | 'resize' | 'is' | 'id'> {
-    data: ComboboxData<Value, Ext>;
+    options: ComboboxData<Value, Ext>;
     /** Determines whether the select should be searchable @default `false` */
     searchable?: boolean;
+    /** If set, multiple options can be selected @default `false` */
+    multiple?: boolean;
     /** If set, the check icon is displayed near the selected option label @default `true` */
     withCheckIcon?: boolean;
     /** Position of the check icon relative to the option label @default `'left'` */
@@ -12,23 +14,29 @@ export interface SelectProps<Value extends string = string, Ext extends Combobox
     nothingFoundMessage?: string;
     /** If set, it becomes possible to deselect value by clicking on the selected option @default `true` */
     allowDeselect?: boolean;
+    /** If set, the dropdown will close after an option is selected @default `!multiple` */
+    closeOnSelect?: boolean;
     /** If set, the clear button is displayed in the right section when the component has value @default `false` */
+    /** Icon displayed in the left section by default */
+    icon?: string;
     limit?: number;
-    /** Props passed down to the underlying `ScrollArea` component in the dropdown */
     /** Input autocomplete attribute */
     autoComplete?: string;
 }
 declare const __VLS_export: <Value extends string = string, Ext extends ComboboxItemExt = object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(SelectProps<Value, Ext> & {
+        /** Dropdown opened state */
         open?: boolean;
-        modelValue?: ComboboxItem<Value, Ext> | null;
+        /** Value handler */
+        modelValue?: string | string[] | null;
+        /** Search handler */
         search?: string;
     }) & {
         onSelect?: ((args_0: number) => any) | undefined;
         onClear?: (() => any) | undefined;
         onClose?: ((args_0: import("..").ComboboxDropdownEventSource) => any) | undefined;
-        onSubmit?: ((args_0: string, args_1: ComboboxItem) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: ComboboxItem<Value, Ext> | null) => any) | undefined;
+        onSubmit?: ((args_0: string, args_1: import("..").ComboboxItem) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | string[] | null) => any) | undefined;
         onOpen?: ((args_0: import("..").ComboboxDropdownEventSource) => any) | undefined;
         "onUpdate:search"?: ((value: string) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
@@ -38,6 +46,11 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
+        selection?: (props: {
+            value: string | string[] | null;
+            display: string;
+        }) => any;
+    } & {
         label?: (props: {}) => any;
     } & {
         description?: (props: {}) => any;
@@ -48,7 +61,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     } & {
         rightSection?: (props: {}) => any;
     };
-    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
+    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: import("..").ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: string | string[] | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "nuance-ui",
-	"version": "0.2.2",
-	"description": "A UI Library for Modern Web Apps, powered by Vue.",
+	"version": "0.2.6",
+	"description": "A modern Vue UI library inspired by the best of the React ecosystem.",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/Igor-Iugin/nuance-ui.git"
@@ -17,69 +17,30 @@
 			"types": "./dist/runtime/composals/index.d.ts",
 			"import": "./dist/runtime/composals/index.js"
 		},
-		"./composals/*": {
-			"types": "./dist/runtime/composals/*.d.ts",
-			"import": "./dist/runtime/composals/*.js"
-		},
-		"./components/*": {
-			"types": "./dist/runtime/components/*.d.ts",
-			"import": "./dist/runtime/components/*.js"
+		"./components": {
+			"types": "./dist/runtime/components/index.d.ts",
+			"import": "./dist/runtime/components/index.js"
 		},
 		"./modals": {
 			"types": "./dist/runtime/modals/index.d.ts",
 			"import": "./dist/runtime/modals/index.js"
 		},
-		"./modals/*": {
-			"types": "./dist/runtime/modals/*.d.ts",
-			"import": "./dist/runtime/modals/*.js"
-		},
 		"./helpers": {
 			"types": "./dist/runtime/helpers/index.d.ts",
 			"import": "./dist/runtime/helpers/index.js"
 		},
-		"./helpers/*": {
-			"types": "./dist/runtime/helpers/*.d.ts",
-			"import": "./dist/runtime/helpers/*.js"
-		},
 		"./utils": {
 			"types": "./dist/runtime/utils/index.d.ts",
 			"import": "./dist/runtime/utils/index.js"
 		},
-		"./utils/*": {
-			"types": "./dist/runtime/utils/*.d.ts",
-			"import": "./dist/runtime/utils/*.js"
-		},
 		"./types": {
 			"types": "./dist/runtime/types/index.d.ts",
 			"import": "./dist/runtime/types/index.js"
-		},
-		"./types/*": {
-			"types": "./dist/runtime/types/*.d.ts",
-			"import": "./dist/runtime/types/*.js"
 		}
 	},
 	"main": "./dist/module.mjs",
-	"typesVersions": {
-		"*": {
-			".": [
-				"./dist/types.d.mts"
-			],
-			"composals": [
-				"./dist/runtime/composals/index.d.ts"
-			],
-			"modals": [
-				"./dist/runtime/modals/index.d.ts"
-			],
-			"helpers": [
-				"./dist/runtime/helpers/index.d.ts"
-			],
-			"utils": [
-				"./dist/runtime/utils/index.d.ts"
-			],
-			"types": [
-				"./dist/runtime/types/index.d.ts"
-			]
-		}
+	"publishConfig": {
+		"access": "public"
 	},
 	"files": [
 		"dist"
@@ -125,14 +86,14 @@
 		"@nuxt/eslint": "1.10.0",
 		"@nuxt/eslint-config": "^1.13.0",
 		"@nuxt/module-builder": "^1.0.2",
-		"@nuxt/schema": "^4.3.0",
+		"@nuxt/schema": "^4.4.2",
 		"@nuxt/test-utils": "^4.0.0",
 		"@nuxtjs/color-mode": "^4.0.0",
 		"@nuxtjs/stylelint-module": "^5.2.1",
 		"@types/node": "latest",
 		"changelogen": "^0.6.2",
 		"eslint": "^9.39.2",
-		"nuxt": "^4.3.0",
+		"nuxt": "^4.4.2",
 		"postcss": "^8.5.6",
 		"postcss-preset-mantine": "^1.18.0",
 		"postcss-simple-vars": "^7.0.1",
@@ -157,4 +118,4 @@
 		"vue-components",
 		"ui"
 	]
-}
+}

package/dist/runtime/components/combobox/lib/utils/is-options-group.d.ts

@@ -1,2 +0,0 @@
-import type { ComboboxItemExt, ComboboxParsedItem, ComboboxParsedItemGroup } from '../../types/index.js';
-export declare function isOptionsGroup<Value extends string = string, Ext extends ComboboxItemExt = object>(item: ComboboxParsedItem<Value, Ext>): item is ComboboxParsedItemGroup<Value, Ext>;