firstly 0.2.0 → 0.3.0

package/esm/ui/Grid2.svelte

@@ -18,7 +18,7 @@
 	import Clipboardable from './Clipboardable.svelte'
 	import GridLoading from './GridLoading.svelte'
 	import Icon from './Icon.svelte'
-	import { align, getAligns } from './index.js'
+	import { align, baseTable, getAligns } from './index.js'
 	import {
 		LibIcon_Add,
 		LibIcon_Settings,
@@ -38,11 +38,11 @@
 	export let loadingRows = 5
 
 	export let classes = {
-		table: 'table-pin-rows table-pin-cols',
+		// table: 'table-pin-rows table-pin-cols',
+		table: '',
 	}
 	export let orderBy: EntityOrderBy<T> | undefined = undefined
 	export let orderByCols: (keyof T)[] | true | undefined = undefined
-	export let settingsLeft = false
 
 	export let dicoNoResult = 'Aucun résultat !'
 
@@ -86,58 +86,15 @@
 	const cellsToTake = (cells: Cell<T>[]) => {
 		return cells.filter((c) => c.modeView !== 'hide')
 	}
-
-	const classForRounding = (i: number) => {
-		if (settingsLeft && (withEdit || withDelete || withAdd)) {
-			if (i === 0) {
-				return ''
-			} else if (i === cells.length - 1) {
-				return 'rounded-tr-lg'
-			}
-		}
-
-		if (!settingsLeft && (withEdit || withDelete || withAdd)) {
-			if (i === 0) {
-				return 'rounded-tl-lg'
-			} else if (i === cells.length - 1) {
-				return ''
-			}
-		}
-
-		if (i === 0) {
-			return 'rounded-tl-lg'
-		} else if (i === cells.length - 1) {
-			return 'rounded-tr-lg'
-		}
-	}
 </script>
 
 <div class="overflow-x-auto">
-	<table class="table {classes.table} bg-base-200">
-		<thead>
-			<tr>
-				{#if settingsLeft && (withEdit || withDelete || withAdd)}
-					<th class="rounded-tl-lg">
-						<div class="flex justify-start">
-							{#if !withAdd}
-								<Icon data={LibIcon_Settings}></Icon>
-							{:else}
-								<Button
-									permission={r.metadata.options.permissionApiInsert}
-									disabled={!r.metadata.apiInsertAllowed()}
-									class="btn btn-square btn-ghost btn-xs"
-									on:click={() => dispatch('add', {})}
-								>
-									<Icon data={LibIcon_Add} />
-								</Button>
-							{/if}
-						</div>
-					</th>
-				{/if}
-
+	<table class="table {classes.table} {baseTable}">
+		<thead class="">
+			<tr class="">
 				{#each cellsToTake(cells) as b, i}
 					{@const al = align(b.field, b.kind === 'slot')}
-					<th class="{al} {classForRounding(i)}">
+					<th class={al}>
 						{#if b.headerSlot}
 							<slot name="header" field={b.field} />
 						{:else}
@@ -160,15 +117,14 @@
 					</th>
 				{/each}
 
-				{#if !settingsLeft && (withEdit || withDelete || withAdd)}
-					<th class="rounded-tr-lg">
+				{#if withEdit || withDelete || withAdd}
+					<th class="">
 						<div class="flex justify-end">
 							{#if withAdd}
 								<Button
-									permission={r.metadata.options.permissionApiInsert}
 									disabled={!r.metadata.apiInsertAllowed()}
 									class="btn btn-square btn-ghost btn-xs"
-									on:click={() => dispatch('add', {})}
+									onclick={() => dispatch('add', {})}
 								>
 									<Icon data={LibIcon_Add} />
 								</Button>
@@ -180,40 +136,12 @@
 				{/if}
 			</tr>
 		</thead>
-		<tbody>
+		<tbody class="">
 			{#if r.loading.init && r.metadata.apiReadAllowed}
 				<GridLoading columns={getAligns(cells, withEdit || withDelete)} {loadingRows} />
 			{:else}
 				{#each r.items ?? [] as row}
 					<tr onclick={() => dispatch('rowclick', row)} class="hover:bg-base-content/20">
-						<!-- BECARFULL THIS CODE IS DUPLICATED -->
-						{#if settingsLeft && (withEdit || withDelete)}
-							<td class="text-left">
-								<div class="flex justify-start gap-2">
-									{#if withEdit}
-										<Button
-											permission={r.metadata.options.permissionApiUpdate}
-											disabled={!r.metadata.apiUpdateAllowed()}
-											class="btn btn-square btn-ghost btn-xs"
-											on:click={() => dispatch('edit', row)}
-										>
-											<Icon data={LibIcon_Edit} />
-										</Button>
-									{/if}
-									{#if withDelete}
-										<Button
-											permission={r.metadata.options.permissionApiDelete}
-											disabled={!r.metadata.apiDeleteAllowed()}
-											class="btn btn-square btn-ghost btn-xs"
-											on:click={() => dispatch('delete', row)}
-										>
-											<Icon data={LibIcon_Delete} />
-										</Button>
-									{/if}
-								</div>
-							</td>
-						{/if}
-
 						{#each cellsToTake(cells) as b}
 							{@const metaType = getFieldMetaType(b.field)}
 							<td class={align(b.field, b.kind === 'slot')}>
@@ -229,6 +157,16 @@
 												on:refresh
 											></svelte:component>
 										</div>
+									{:else if b.componentS5}
+										{@const Comp = b.componentS5}
+										<!-- NOT TESTED YET! -->
+										<div class={b.class}>
+											<Comp
+												{...b.props}
+												{...b.rowToProps ? b.rowToProps(row) : {}}
+												onrefresh={() => dispatch('refresh')}
+											/>
+										</div>
 									{:else}
 										<pre>Col: {b.col}</pre>
 										<pre class="bg-error">Component prop needed !</pre>
@@ -282,25 +220,23 @@
 							</td>
 						{/each}
 
-						{#if !settingsLeft && (withEdit || withDelete)}
+						{#if withEdit || withDelete}
 							<td class="text-right">
 								<div class="flex justify-end gap-2">
 									{#if withEdit}
 										<Button
-											permission={r.metadata.options.permissionApiUpdate}
-											disabled={!r.metadata.apiUpdateAllowed()}
+											disabled={!r.metadata.apiUpdateAllowed(row)}
 											class="btn btn-square btn-ghost btn-xs"
-											on:click={() => dispatch('edit', row)}
+											onclick={() => dispatch('edit', row)}
 										>
 											<Icon data={LibIcon_Edit} />
 										</Button>
 									{/if}
 									{#if withDelete}
 										<Button
-											permission={r.metadata.options.permissionApiDelete}
 											disabled={!r.metadata.apiDeleteAllowed()}
 											class="btn btn-square btn-ghost btn-xs"
-											on:click={() => dispatch('delete', row)}
+											onclick={() => dispatch('delete', row)}
 										>
 											<Icon data={LibIcon_Delete} />
 										</Button>
@@ -345,7 +281,7 @@
 		>
 			<Button
 				class={r.loading.more ? 'btn-disabled' : 'btn-primary'}
-				on:click={() => {
+				onclick={() => {
 					r.queryMore()
 				}}>Plus</Button
 			>

package/esm/ui/Grid2.svelte.d.ts

@@ -14,11 +14,10 @@ declare class __sveltets_Render<T extends Record<any, any>> {
         } | undefined;
         orderBy?: EntityOrderBy<T> | undefined;
         orderByCols?: true | (keyof T)[] | undefined;
-        settingsLeft?: boolean;
         dicoNoResult?: string;
     };
     events(): {
-        refresh: any;
+        refresh: CustomEvent<any>;
         add: CustomEvent<any>;
         rowclick: CustomEvent<any>;
         edit: CustomEvent<any>;

package/esm/ui/GridPaginate.svelte

@@ -30,7 +30,7 @@
 <FieldContainer {label} forId="paginate" classes={{ label: 'justify-end' }}>
 	<div class="flex w-36 items-center justify-end">
 		{#if totalCount === undefined}
-			<Loading class="ml-6 mr-2 h-3 w-1/6"></Loading>
+			<Loading class="mr-2 ml-6 h-3 w-1/6"></Loading>
 			<Loading class="mx-2 h-4 w-1/2"></Loading>
 			<Loading class="mx-2 h-3 w-1/6"></Loading>
 		{:else if !needPaginate}

package/esm/ui/GridPaginate2.svelte

@@ -13,11 +13,11 @@
 <FieldContainer {label} forId="paginate" classes={{ label: 'justify-end' }}>
 	<div class="flex w-14 items-center justify-end">
 		{#if totalCount === undefined}
-			<Loading class="ml-6 mr-2 h-3 w-1/6"></Loading>
+			<Loading class="mr-2 ml-6 h-3 w-1/6"></Loading>
 			<Loading class="mx-2 h-4 w-1/2"></Loading>
 			<Loading class="mx-2 h-3 w-1/6"></Loading>
 		{:else}
-			<span class="justify-end px-2 font-bold text-primary">
+			<span class="mb-2 justify-end px-2 text-lg font-bold text-primary">
 				{totalCount}
 			</span>
 		{/if}

package/esm/ui/Icon.svelte

@@ -69,14 +69,7 @@
 
 {#if BROWSER || ssr}
 	{#if svg || $$slots.default}
-		<span
-			class={getInfoProps(className)}
-			style={getInfoProps(style)}
-			style:width
-			style:height
-			{role}
-			on:click
-		>
+		<span class={getInfoProps(className)} style={getInfoProps(style)} style:width style:height {role}>
 			<slot>
 				{@html svg ?? ''}
 			</slot>
@@ -89,7 +82,6 @@
 			class={getInfoProps(className)}
 			style={getInfoProps(style)}
 			{role}
-			on:click
 		>
 			{#each Array.isArray(path) ? path : [path] as d, i}
 				<path
@@ -102,15 +94,7 @@
 		</svg>
 	{/if}
 {:else}
-	<svg
-		{width}
-		{height}
-		{viewBox}
-		class={getInfoProps(className)}
-		style={getInfoProps(style)}
-		{role}
-		on:click
-	>
+	<svg {width} {height} {viewBox} class={getInfoProps(className)} style={getInfoProps(style)} {role}>
 		<path
 			d={LibIcon_Empty}
 			fill="currentColor"

package/esm/ui/Icon.svelte.d.ts

@@ -45,8 +45,6 @@ declare const Icon: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithC
 }, {
     default: {};
 }>, {
-    click: MouseEvent;
-} & {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};

package/esm/ui/LibIcon.js

@@ -1,6 +1,6 @@
 // Lib Icons
 // https://icones.js.org/ and https://pictogrammers.com/library/mdi/
-import { mdiAccountTie, mdiAccountTieWoman, mdiCancel, mdiCheck, mdiCheckAll, mdiChevronDown, mdiChevronLeft, mdiChevronRight, mdiChevronUp, mdiCloseCircleOutline, mdiCogOutline, mdiContentSaveEdit, mdiDelete, mdiEye, mdiEyeOff, mdiLoading, mdiMagnify, mdiPencil, mdiPlusBoxMultiple, mdiPlusCircle, mdiSend, mdiSort, mdiSortReverseVariant, mdiSortVariant, } from '@mdi/js';
+import { mdiAccountTie, mdiAccountTieWoman, mdiCancel, mdiCheck, mdiCheckAll, mdiChevronDown, mdiChevronLeft, mdiChevronRight, mdiChevronUp, mdiCloseCircleOutline, mdiCogOutline, mdiContentSaveEdit, mdiDelete, mdiEye, mdiEyeOff, mdiLoading, mdiMagnify, mdiPencil, mdiPlus, mdiPlusBoxMultiple, mdiSend, mdiSort, mdiSortReverseVariant, mdiSortVariant, } from '@mdi/js';
 export const LibIcon_Empty = ``;
 export const LibIcon_Forbidden = mdiCancel;
 export const LibIcon_ChevronDown = mdiChevronDown;
@@ -10,7 +10,7 @@ export const LibIcon_ChevronRight = mdiChevronRight;
 export const LibIcon_Search = mdiMagnify;
 export const LibIcon_Check = mdiCheck;
 export const LibIcon_MultiCheck = mdiCheckAll;
-export const LibIcon_Add = mdiPlusCircle;
+export const LibIcon_Add = mdiPlus;
 export const LibIcon_Eye = mdiEye;
 export const LibIcon_EyeOff = mdiEyeOff;
 export const LibIcon_MultiAdd = mdiPlusBoxMultiple;

package/esm/ui/Loading.svelte

@@ -8,7 +8,7 @@
 <!-- To fix one capa & cadb are on the same css -->
 <div
 	class={tw(
-		'skeleton flex h-4 w-full items-center justify-center rounded-lg bg-base-content/20',
+		'flex h-4 skeleton items-center justify-center rounded-lg bg-base-content/20',
 		extraClass,
 	)}
 >

package/esm/ui/dialog/DialogManagement.svelte

@@ -16,7 +16,7 @@
 		>
 			{@html toShow.children}
 			<svelte:fragment slot="actions">
-				<Button class="text-white" on:click={() => dialog.close(toShow.id, { success: true })}
+				<Button class="btn-primary" onclick={() => dialog.close(toShow.id, { success: true })}
 					>Confirmer</Button
 				>
 			</svelte:fragment>
@@ -29,10 +29,7 @@
 		>
 			{@html toShow.children}
 			<svelte:fragment slot="actions">
-				<Button
-					class="btn-outline btn-error"
-					on:click={() => dialog.close(toShow.id, { success: true })}
-				>
+				<Button class="btn-error" onclick={() => dialog.close(toShow.id, { success: true })}>
 					Confirmer
 				</Button>
 			</svelte:fragment>
@@ -51,6 +48,18 @@
 				{/if}
 			</svelte:component>
 		</DialogPrimitive>
+	{:else if toShow.componentS5}
+		<DialogPrimitive
+			detail={toShow.detail}
+			open
+			on:change={() => dialog.close(toShow.id, { success: false })}
+		>
+			<svelte:component this={toShow.componentS5} {...toShow.props} dialogId={toShow.id}>
+				{#if toShow.children}
+					{@html toShow.children}
+				{/if}
+			</svelte:component>
+		</DialogPrimitive>
 	{:else if toShow.component}
 		<DialogPrimitive
 			detail={toShow.detail}

package/esm/ui/dialog/DialogPrimitive.svelte

@@ -57,7 +57,7 @@
 			{...$content}
 			use:$content.action
 		>
-			<div class="left-0 top-0 mb-4 w-full">
+			<div class="top-0 left-0 mb-4 w-full">
 				<h2 {...$localTitle} use:$localTitle.action class="m-0 text-lg font-medium">
 					<div class="flex items-center justify-between gap-4">
 						<LinkPlus item={detail}></LinkPlus>
@@ -65,8 +65,8 @@
 							{...$close}
 							use:$close.action
 							aria-label="close"
-							class="btn btn-circle btn-outline btn-lg
-            h-max min-h-0 w-max border-none"
+							class="btn btn-circle h-max min-h-0
+            w-max border-none btn-outline btn-lg"
 						>
 							<Icon data={LibIcon_Cross}></Icon>
 						</button>

package/esm/ui/dialog/FormEditAction.svelte

@@ -26,8 +26,8 @@
 			{#if wDelete}
 				<Button
 					type="button"
-					on:click={dispatchDelete}
-					class="btn-outline btn-error mr-4 text-white"
+					onclick={dispatchDelete}
+					class="mr-4 btn-error"
 					isLoading={$store.loading}
 				>
 					<Icon data={LibIcon_Delete} />
@@ -41,7 +41,7 @@
 			</div>
 		</div>
 
-		<Button class="text-white" {...$$restProps} isLoading={$store.loading}>
+		<Button class="btn-primary" {...$$restProps} isLoading={$store.loading}>
 			<Icon data={LibIcon_Check} />
 			<p>Sauvegarder</p>
 		</Button>
@@ -54,7 +54,7 @@
 			{/if}
 		</div>
 
-		<Button class="text-white" {...$$restProps} isLoading={$store.loading}>
+		<Button class="btn-primary" {...$$restProps} isLoading={$store.loading}>
 			<Icon data={LibIcon_Add} />
 			<p>{textCreate}</p>
 		</Button>

package/esm/ui/dialog/dialog.d.ts

@@ -1,6 +1,8 @@
-import type { SvelteComponent } from 'svelte';
+import type { Component, SvelteComponent } from 'svelte';
 import { type Repository } from 'remult';
-import { type BaseItemLight, type CellsInput, type StoreItem } from '../../internals';
+import type { BaseItemLight } from '../../internals/BaseEnum';
+import type { CellsInput } from '../../internals/cellsBuildor';
+import type { StoreItem } from '../../internals/storeItem';
 import type { FF_Repo } from '../../svelte';
 export type DialogClasses = {
     /**
@@ -18,6 +20,7 @@ export type DialogMetaData<entityType = any> = {
     defaults?: Partial<entityType>;
     classes?: DialogClasses;
     component?: new (...args: any[]) => SvelteComponent;
+    componentS5?: Component;
     props?: any;
     children?: any;
     reThrow?: boolean;

package/esm/ui/dialog/dialog.js

@@ -1,6 +1,6 @@
 import { writable } from 'svelte/store';
 import {} from 'remult';
-import { LibIcon_Add, LibIcon_Delete, LibIcon_Edit, LibIcon_Search, } from '../../internals';
+import { LibIcon_Add, LibIcon_Delete, LibIcon_Edit, LibIcon_Search } from '../LibIcon';
 const createDialogManagement = () => {
     const { subscribe, update } = writable([]);
     // internal...
@@ -18,7 +18,7 @@ const createDialogManagement = () => {
         confirm: (topic, text, icon) => {
             const detail = {
                 detail: {
-                    caption: 'Confirmez',
+                    caption: 'A Confirmer',
                     icon: { data: icon },
                 },
                 children: `

package/esm/ui/index.d.ts

@@ -3,3 +3,4 @@ import type { Cell } from '../internals';
 export type Align = 'text-left' | 'text-center' | 'text-right';
 export declare const align: (f?: FieldMetadata, isSlot?: boolean) => Align;
 export declare const getAligns: (cells: Cell<any>[], withAction: boolean) => Align[];
+export declare const baseTable = "overflow-x-auto rounded-box bg-base-300/60";

package/esm/ui/index.js

@@ -17,3 +17,4 @@ export const getAligns = (cells, withAction) => {
     }
     return cols;
 };
+export const baseTable = 'overflow-x-auto rounded-box bg-base-300/60';

package/esm/ui/internals/FieldContainer.svelte

@@ -1,20 +1,31 @@
 <script lang="ts">
 	import { tw } from '../../utils/tailwind'
 
-	export let label: string = 'label'
-	export let forId: string
-	export let required = false
-	export let error: string = ''
+	interface Props {
+		label?: string
+		forId: string
+		required?: boolean
+		error?: string
+		/**
+		 * example usage for paginate
+		 * classes={{ label: 'justify-end' }}
+		 */
+		classes?: { label?: string; slot?: string }
+		children?: import('svelte').Snippet
+	}
 
-	/**
-	 * example usage for paginate
-	 * classes={{ label: 'justify-end' }}
-	 */
-	export let classes: { label?: string; slot?: string } = {}
+	let {
+		label = 'label',
+		forId,
+		required = false,
+		error = '',
+		classes = {},
+		children,
+	}: Props = $props()
 </script>
 
-<div class="form-control w-full">
-	<label for={forId} class={tw(`label flex gap-1 px-2 pb-1`, classes.label)}>
+<fieldset class="fieldset w-full">
+	<label for={forId} class={tw(`label flex gap-1 px-2 justify-between`, classes.label)}>
 		<span class="label-text pl-2 text-xs text-base-content/60">
 			{label}{required ? ' *' : ''}
 		</span>
@@ -22,7 +33,7 @@
 			<span class="label-text-alt truncate text-error">{error}</span>
 		{/if}
 	</label>
-	<div class={tw('grid h-12 w-full', classes.slot)}>
-		<slot />
+	<div class={tw('grid h-12 w-full text-base', classes.slot)}>
+		{@render children?.()}
 	</div>
-</div>
+</fieldset>

package/esm/ui/internals/FieldContainer.svelte.d.ts

@@ -1,39 +1,18 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const FieldContainer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     label?: string;
     forId: string;
     required?: boolean;
     error?: string;
     /**
-         * example usage for paginate
-         * classes={{ label: 'justify-end' }}
-         */ classes?: {
+     * example usage for paginate
+     * classes={{ label: 'justify-end' }}
+     */
+    classes?: {
         label?: string;
         slot?: string;
     };
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type FieldContainer = InstanceType<typeof FieldContainer>;
+    children?: import('svelte').Snippet;
+}
+declare const FieldContainer: import("svelte").Component<Props, {}, "">;
+type FieldContainer = ReturnType<typeof FieldContainer>;
 export default FieldContainer;

package/esm/ui/internals/Input.svelte.d.ts

@@ -21,7 +21,7 @@ declare const Input: $$__sveltets_2_IsomorphicComponent<{
 }, {
     blur: FocusEvent;
     change: Event;
-    click: MouseEvent;
+    click: PointerEvent;
     focus: FocusEvent;
     keydown: KeyboardEvent;
     keypress: KeyboardEvent;

package/esm/ui/internals/Textarea.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount } from 'svelte'
 
-	import { scrollbar } from '../../internals/theme'
-
 	export let name: string | null = null
 	export let id = ''
 	export let rows = 4
@@ -50,10 +48,9 @@
 		use:focusNow
 		{...$$restProps}
 		class="shadow-neutral-focus md:rounded-xls
-			textarea textarea-bordered flex h-max min-h-8
+			textarea flex h-max min-h-8
 			w-full items-center rounded-lg bg-transparent text-xs
-			shadow-sm md:text-sm lg:min-h-[2.5rem]
-			{scrollbar.thin}"
+			shadow-sm md:text-sm lg:min-h-[2.5rem]"
 		id={id || name || 'default-textarea-id'}
 		{name}
 		{placeholder}

package/esm/ui/internals/select/MultiSelectMelt.svelte

@@ -23,7 +23,7 @@
 	export let loadOptions:
 		| ((str: string) => Promise<{ items: BaseItem[]; totalCount: number }>)
 		| undefined = undefined
-	export let values: string[] | undefined = undefined
+	export let values: (string | null)[] | undefined = undefined
 	export let clearable = false
 
 	const dispatch = createEventDispatcher()
@@ -42,7 +42,7 @@
 		}
 	})
 
-	const getDefaultValues = (_selectedValue: string[] | undefined) => {
+	const getDefaultValues = (_selectedValue: (string | null)[] | undefined) => {
 		if (!items) {
 			return []
 		}
@@ -97,14 +97,16 @@
 			const list = (v ?? []).map((c) => c.value.id)
 
 			// Create a map to count occurrences of each element
-			const countMap: Map<string, number> = new Map()
+			// TODO: switch to: Use SvelteMap instead  svelte/prefer-svelte-reactivity
+			// eslint-disable-next-line
+			const countMap: Map<string | null, number> = new Map()
 
 			list.forEach((item) => {
 				countMap.set(item, (countMap.get(item) || 0) + 1)
 			})
 
 			// Filter the list to include only elements that occur exactly once
-			const uniqueList: string[] = list.filter((item) => countMap.get(item) === 1)
+			const uniqueList: (string | null)[] = list.filter((item) => countMap.get(item) === 1)
 
 			const newIds = uniqueList.sort().join(',')
 			const oldSelectedValues = (values ?? []).sort().join(',')
@@ -174,7 +176,7 @@
 	$: calcFilteredItems($touchedInput, $inputValue, values)
 </script>
 
-<div class="input input-bordered flex min-w-0 items-center">
+<div class="input flex min-w-0 items-center">
 	<div class="relative">
 		{#if iconToDisplayInInput($localSelected)}
 			{@const ico = iconToDisplayInInput($localSelected)}
@@ -186,7 +188,7 @@
 	<input
 		{...$input}
 		use:$input.action
-		class="-ml-8 -mr-5 h-full min-w-0 flex-grow bg-transparent px-10"
+		class="-mr-5 -ml-8 h-full min-w-0 flex-grow bg-transparent px-10"
 		{placeholder}
 	/>
 	<div class="pointer-events-none relative right-0 flex gap-2">
@@ -218,9 +220,9 @@
 					use:$option.action
 					class="relative flex cursor-pointer scroll-my-2 items-center rounded-md px-1
           py-2
+          data-[disabled]:opacity-50
           data-[highlighted]:bg-primary
-          data-[highlighted]:text-primary-content
-					data-[disabled]:opacity-50"
+					data-[highlighted]:text-primary-content"
 				>
 					{#if isChecked($localSelected, item)}
 						<Icon data={LibIcon_Check} class="w-6"></Icon>

package/esm/ui/internals/select/MultiSelectMelt.svelte.d.ts

@@ -21,7 +21,7 @@ declare const MultiSelectMelt: $$__sveltets_2_IsomorphicComponent<{
         items: BaseItem[];
         totalCount: number;
     }>) | undefined;
-    values?: string[] | undefined;
+    values?: (string | null)[] | undefined;
     clearable?: boolean;
 }, {
     selected: CustomEvent<any>;