windmill-components 1.550.0 → 1.555.0

package/package/components/raw_apps/RawAppInlineScriptRunnable.svelte

@@ -29,7 +29,6 @@ let selectedTab = $state('inputs');
 let args = $state({});
 function getSchema(runnable) {
     if (runnable?.type == 'runnableByPath') {
-        console.log('runnable.schema', runnable.schema);
         return runnable.schema;
     }
     else if (runnable?.type == 'runnableByName' && runnable.inlineScript) {

package/package/components/raw_apps/RawAppInlineScriptsPanel.svelte

@@ -4,10 +4,7 @@ import { workspaceStore } from '../../stores';
 import RawAppInlineScriptPanelList from './RawAppInlineScriptPanelList.svelte';
 import RawAppInlineScripRunnable from './RawAppInlineScriptRunnable.svelte';
 import { createScriptFromInlineScript } from '../apps/editor/inlineScriptsPanel/utils';
-export let runnables;
-export let selectedRunnable;
-export let appPath;
-export let width = undefined;
+let { runnables, selectedRunnable = $bindable(), appPath, width = undefined } = $props();
 </script>
 
 <Splitpanes
@@ -22,7 +19,7 @@ export let width = undefined;
 			<div class="text-sm text-secondary text-center py-8 px-2">
 				Select a runnable on the left panel
 			</div>
-		{:else if $runnables?.[selectedRunnable]}
+		{:else if runnables?.[selectedRunnable]}
 			{#key selectedRunnable}
 				<RawAppInlineScripRunnable
 					{appPath}
@@ -35,16 +32,13 @@ export let width = undefined;
 						)
 					}}
 					on:delete={() => {
-						runnables.update((runnables) => {
-							if (selectedRunnable) {
-								delete runnables[selectedRunnable]
-							}
-							selectedRunnable = undefined
-							return { ...runnables }
-						})
+						if (selectedRunnable) {
+							delete runnables[selectedRunnable]
+						}
+						selectedRunnable = undefined
 					}}
 					id={selectedRunnable}
-					bind:runnable={$runnables[selectedRunnable]}
+					bind:runnable={runnables[selectedRunnable]}
 				/>{/key}
 		{:else}
 			<div class="text-sm text-tertiary text-center py-8 px-2">

package/package/components/raw_apps/RawAppInlineScriptsPanel.svelte.d.ts

@@ -1,5 +1,10 @@
-import type { Writable } from 'svelte/store';
 import type { Runnable } from '../apps/inputType';
+interface Props {
+    runnables: Record<string, Runnable>;
+    selectedRunnable: string | undefined;
+    appPath: string;
+    width?: number | undefined;
+}
 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;
@@ -13,15 +18,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const RawAppInlineScriptsPanel: $$__sveltets_2_IsomorphicComponent<{
-    runnables: Writable<Record<string, Runnable>>;
-    selectedRunnable: string | undefined;
-    appPath: string;
-    width?: number | undefined;
-}, {
+declare const RawAppInlineScriptsPanel: $$__sveltets_2_IsomorphicComponent<Props, {
     hidePanel: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "selectedRunnable">;
 type RawAppInlineScriptsPanel = InstanceType<typeof RawAppInlineScriptsPanel>;
 export default RawAppInlineScriptsPanel;

package/package/components/raw_apps/RawAppPreview.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">import {} from '../../stores';
 import RawAppBackgroundRunner from './RawAppBackgroundRunner.svelte';
 import { htmlContent } from './utils';
-export let workspace;
-export let user;
-export let version;
-export let path;
-export let runnables;
-let iframe;
+let { workspace, user, secret, path, runnables } = $props();
+let iframe = $state();
 </script>
 
 <RawAppBackgroundRunner {workspace} editor={false} {iframe} {runnables} {path} />
@@ -14,6 +10,6 @@ let iframe;
 <iframe
 	bind:this={iframe}
 	title="raw-app"
-	srcDoc={htmlContent(workspace, version, { ctx: user, workspace })}
+	srcDoc={htmlContent(workspace, secret, { ctx: user, workspace })}
 	class="w-full h-full min-h-screen bg-white border-none"
 ></iframe>

package/package/components/raw_apps/RawAppPreview.svelte.d.ts

@@ -1,26 +1,12 @@
 import { type UserExt } from '../../stores';
 import type { HiddenRunnable } from '../apps/types';
-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;
-}
-declare const RawAppPreview: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     workspace: string;
     user: UserExt | undefined;
-    version: number;
+    secret: string | undefined;
     path: string;
     runnables: Record<string, HiddenRunnable>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type RawAppPreview = InstanceType<typeof RawAppPreview>;
+}
+declare const RawAppPreview: import("svelte").Component<Props, {}, "">;
+type RawAppPreview = ReturnType<typeof RawAppPreview>;
 export default RawAppPreview;

package/package/components/raw_apps/utils.d.ts

@@ -2,5 +2,5 @@ import type { HiddenRunnable } from '../apps/types';
 export type RawApp = {
     files: string[];
 };
-export declare function htmlContent(workspace: string, version: number, ctx: any): string;
+export declare function htmlContent(workspace: string, secret: string | undefined, ctx: any): string;
 export declare function genWmillTs(runnables: Record<string, HiddenRunnable>): string;

package/package/components/raw_apps/utils.js

@@ -1,20 +1,20 @@
 import { schemaToTsType } from '../../schema';
 import { capitalize } from '../../utils';
-export function htmlContent(workspace, version, ctx) {
+export function htmlContent(workspace, secret, ctx) {
     return `
         <!DOCTYPE html>
         <html>
             <head>
                 <meta charset="UTF-8" />
                 <title>App Preview</title>
-                <link rel="stylesheet" href="/api/w/${workspace}/apps/get_data/v/${version}.css" />
+                <link rel="stylesheet" href="/api/w/${workspace}/apps/get_data/v/${secret}.css" />
 				<script>
 					window.ctx = ${ctx ? JSON.stringify(ctx) : 'undefined'}
 				</script>
             </head>
             <body>
                 <div id="root"></div>
-                <script src="/api/w/${workspace}/apps/get_data/v/${version}.js"></script>
+                <script src="/api/w/${workspace}/apps/get_data/v/${secret}.js"></script>
             </body>
         </html>
     `;

package/package/components/runs/RunOption.svelte

@@ -2,10 +2,10 @@
 let { label, children, tooltip, for: forAttr = '', noLabel = false } = $props();
 </script>
 
-<div class="flex flex-col items-start w-fit">
+<div class="flex flex-col items-start w-fit gap-0.5">
 	<div class="text-xs truncate">
 		{#if forAttr}
-			<label for={forAttr} class:text-transparent={noLabel}>{label}</label>
+			<label for={forAttr} class="text-hint" class:text-transparent={noLabel}>{label}</label>
 		{:else}
 			<span class:text-transparent={noLabel}>{label}</span>
 		{/if}

package/package/components/runs/RunsFilter.svelte

@@ -121,9 +121,10 @@ function resetFilter() {
 		</RunOption>
 	{/if}
 	<!-- Filter by -->
-	<div class="flex flex-row gap-1">
+	<div class="flex flex-row gap-4">
 		<RunOption label="Filter by" for="filter-by">
 			<ToggleButtonGroup
+				class="h-9"
 				bind:selected={filterBy}
 				on:selected={(e) => {
 					if (e.detail != filterBy) {
@@ -164,7 +165,7 @@ function resetFilter() {
 						bind:value={() => user ?? undefined, (v) => (user = v ?? null)}
 						clearable
 						onClear={() => ((user = null), dispatch('reset'))}
-						inputClass="!h-[32px] min-w-36"
+						inputClass="!max-h-9 min-w-36 border-none"
 						onCreateItem={(item) => (usernames.push(item), (user = item))}
 						createText="Press enter to use this value"
 						id="user"
@@ -179,7 +180,7 @@ function resetFilter() {
 						bind:value={() => folder ?? undefined, (v) => (folder = v ?? null)}
 						clearable
 						onClear={() => ((folder = null), dispatch('reset'))}
-						inputClass="!h-[32px] min-w-36"
+						inputClass="!max-h-9 min-w-36 border-none"
 						id="folder"
 					/>
 				{/key}
@@ -192,7 +193,7 @@ function resetFilter() {
 						bind:value={() => path ?? undefined, (v) => (path = v ?? null)}
 						clearable
 						onClear={() => ((path = null), dispatch('reset'))}
-						inputClass="!h-[32px] min-w-36"
+						inputClass="!max-h-9 min-w-36 border-none"
 						onCreateItem={(item) => (paths.push(item), (path = item))}
 						createText="Press enter to use this value"
 						id="path"
@@ -417,7 +418,7 @@ function resetFilter() {
 	<RunOption label="Kind" for="kind">
 		{#if small && !calendarSmall}
 			<DropdownSelect
-				btnClasses="min-w-24"
+				btnClasses="min-w-24 h-9 bg-surface-secondary font-normal"
 				items={[
 					{
 						displayName: 'All',
@@ -462,7 +463,7 @@ function resetFilter() {
 				selected={jobKindsCat}
 			/>
 		{:else}
-			<ToggleButtonGroup bind:selected={jobKindsCat}>
+			<ToggleButtonGroup bind:selected={jobKindsCat} class="h-9">
 				{#snippet children({ item })}
 					<ToggleButton value="all" label="All" {item} />
 					<ToggleButton
@@ -509,6 +510,7 @@ function resetFilter() {
 	<!-- Status -->
 	<RunOption label="Status" for="status">
 		<ToggleButtonGroup
+			class="h-9"
 			selected={success ?? 'all'}
 			on:selected={({ detail }) => {
 				success = detail === 'all' ? undefined : detail
@@ -523,7 +525,7 @@ function resetFilter() {
 					tooltip="Running"
 					class="whitespace-nowrap"
 					icon={CirclePlay}
-					iconProps={{ color: success === 'running' ? 'blue' : 'gray' }}
+					selectedColor="yellow"
 					{item}
 				/>
 				<ToggleButton
@@ -531,7 +533,7 @@ function resetFilter() {
 					tooltip="Success"
 					class="whitespace-nowrap"
 					icon={CircleCheck}
-					iconProps={{ color: success === 'success' ? 'green' : 'gray' }}
+					selectedColor="green"
 					{item}
 				/>
 				<ToggleButton
@@ -539,7 +541,7 @@ function resetFilter() {
 					tooltip="Failure"
 					class="whitespace-nowrap"
 					icon={CircleAlert}
-					iconProps={{ color: success === 'failure' ? 'red' : 'gray' }}
+					selectedColor="red"
 					{item}
 				/>
 				{#if success == 'waiting'}
@@ -548,7 +550,7 @@ function resetFilter() {
 						tooltip="Waiting"
 						class="whitespace-nowrap"
 						icon={Hourglass}
-						iconProps={{ color: 'blue' }}
+						selectedColor="blue"
 						{item}
 					/>
 				{:else if success == 'suspended'}
@@ -557,7 +559,7 @@ function resetFilter() {
 						tooltip="Suspended"
 						class="whitespace-nowrap"
 						icon={Hourglass}
-						iconProps={{ color: 'blue' }}
+						selectedColor="purple"
 						{item}
 					/>
 				{/if}
@@ -576,11 +578,12 @@ function resetFilter() {
 		{#snippet trigger()}
 			<Button
 				color="light"
-				variant="border"
+				variant="contained"
 				size="xs"
 				nonCaptureEvent={true}
 				startIcon={{ icon: ListFilterPlus }}
 				iconOnly
+				btnClasses="bg-surface-secondary py-[8.5px]"
 			></Button>
 		{/snippet}
 

package/package/components/runs/RunsFilter.svelte.d.ts

@@ -42,6 +42,6 @@ declare const RunsFilter: $$__sveltets_2_IsomorphicComponent<Props, {
     successChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "path" | "folder" | "user" | "tag" | "success" | "worker" | "label" | "isSkipped" | "argFilter" | "resultFilter" | "schedulePath" | "jobKindsCat" | "concurrencyKey" | "argError" | "resultError" | "allWorkspaces" | "allowWildcards" | "filterBy">;
+}, {}, {}, "path" | "user" | "folder" | "tag" | "success" | "worker" | "label" | "isSkipped" | "argFilter" | "resultFilter" | "schedulePath" | "jobKindsCat" | "concurrencyKey" | "argError" | "resultError" | "allWorkspaces" | "allowWildcards" | "filterBy">;
 type RunsFilter = InstanceType<typeof RunsFilter>;
 export default RunsFilter;

package/package/components/schema/EditableSchemaDrawer.svelte

@@ -191,24 +191,25 @@ const rnd = generateRandomString();
 		{/snippet}
 	</Drawer>
 {:else}
-	<div class="mt-2"></div>
-	<SimpleEditor
-		bind:this={editor}
-		small
-		fixedOverflowWidgets={false}
-		on:change={() => {
-			try {
-				schema = JSON.parse(schemaString)
-				error = ''
-			} catch (err) {
-				error = err.message
-			}
-		}}
-		bind:code={schemaString}
-		lang="json"
-		autoHeight
-		automaticLayout
-	/>
+	<div class="mt-2 bg-surface-secondary rounded-md border py-2.5">
+		<SimpleEditor
+			bind:this={editor}
+			small
+			fixedOverflowWidgets={false}
+			on:change={() => {
+				try {
+					schema = JSON.parse(schemaString)
+					error = ''
+				} catch (err) {
+					error = err.message
+				}
+			}}
+			bind:code={schemaString}
+			lang="json"
+			autoHeight
+			automaticLayout
+		/>
+	</div>
 	{#if !emptyString(error)}
 		<div class="text-red-400 text-xs">{error}</div>
 	{:else}

package/package/components/schema/FlowPropertyEditor.svelte

@@ -15,6 +15,11 @@ import ResourcePicker from '../ResourcePicker.svelte';
 import { DynamicInput } from '../../utils';
 let { format = $bindable(undefined), contentEncoding = undefined, type = undefined, oneOf = $bindable(undefined), required = false, pattern = undefined, password = undefined, variableEditor = undefined, itemPicker = undefined, nullable = $bindable(undefined), disabled = $bindable(undefined), defaultValue = $bindable(undefined), propsNames = [], showExpr = $bindable(undefined), extra = {}, customErrorMessage = undefined, itemsType = undefined, properties = $bindable(undefined), order = $bindable(undefined), requiredProperty = $bindable(undefined), displayWebhookWarning = true, onDrawerClose = undefined } = $props();
 let oneOfSelected = $state(oneOf?.[0]?.title);
+$effect(() => {
+    if (oneOf?.length && !oneOfSelected) {
+        oneOfSelected = oneOf[0].title;
+    }
+});
 const dispatch = createEventDispatcher();
 function getResourceTypesFromFormat(format) {
     if (format?.startsWith('resource-')) {
@@ -372,9 +377,10 @@ let customObjectSelected = $state(format?.startsWith('jsonschema-') ? 'json-sche
 			showExpr = showExpr ? undefined : 'true //fields.foo == 42'
 		}}
 	/>
-	{#if showExpr != undefined}
-		<div class="border">
+	{#if showExpr}
+		<div class="mt-2 bg-surface-secondary rounded-md pl-4">
 			<SimpleEditor
+				yPadding={8}
 				extraLib={`declare const fields: Record<${propsNames
 					?.filter((x) => x != name)
 					.map((x) => `"${x}"`)
@@ -383,6 +389,7 @@ let customObjectSelected = $state(format?.startsWith('jsonschema-') ? 'json-sche
 				bind:code={showExpr}
 				shouldBindKey={false}
 				fixedOverflowWidgets={false}
+				hideLineNumbers
 				autoHeight
 			/>
 		</div>

package/package/components/schema/FlowPropertyEditor.svelte.d.ts

@@ -47,6 +47,6 @@ declare const FlowPropertyEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     requiredChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "disabled" | "properties" | "defaultValue" | "oneOf" | "format" | "order" | "nullable" | "showExpr" | "requiredProperty">;
+}, {}, {}, "disabled" | "properties" | "oneOf" | "format" | "defaultValue" | "order" | "nullable" | "showExpr" | "requiredProperty">;
 type FlowPropertyEditor = InstanceType<typeof FlowPropertyEditor>;
 export default FlowPropertyEditor;

package/package/components/schema/PropertyEditor.svelte

@@ -12,6 +12,7 @@ import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelt
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import { createEventDispatcher, onMount, untrack } from 'svelte';
 import { createDispatcherIfMounted } from '../../createDispatcherIfMounted';
+import TextInput, { inputBaseClass, inputBorderClass } from '../text_input/TextInput.svelte';
 let { description = $bindable(undefined), format = $bindable(undefined), contentEncoding = $bindable(undefined), type = undefined, oneOf = $bindable(), pattern = $bindable(undefined), enum_ = $bindable(undefined), extra = $bindable({}), minW = true, customErrorMessage = $bindable(undefined), title = $bindable(undefined), placeholder = $bindable(undefined), properties = $bindable(), isFlowInput = false, isAppInput = false, order = $bindable(), itemsType = $bindable(undefined), typeeditor, children } = $props();
 $effect.pre(() => {
     if (description == undefined) {
@@ -112,6 +113,7 @@ $effect(() => {
 				onkeydown={onKeyDown}
 				onchange={() => dispatch('change')}
 				placeholder="Field description"
+				class={twMerge(inputBorderClass(), inputBaseClass, 'w-full')}
 			></textarea>
 		</Label>
 
@@ -119,30 +121,31 @@ $effect(() => {
 			{#snippet header()}
 				<Tooltip light>Will be displayed in the UI instead of the field name.</Tooltip>
 			{/snippet}
-			<input
+			<TextInput
 				bind:value={title}
-				onchange={() => dispatch('change')}
-				onkeydown={onKeyDown}
-				placeholder="Field title"
+				inputProps={{ placeholder: 'Field title', onkeydown, onchange: () => dispatch('change') }}
 			/>
 		</Label>
 
-		<Label label="Placeholder">
-			{#snippet header()}
-				<Tooltip light>
-					Will be displayed in the input field when the field is empty. If not set, the default
-					value will be used. The placeholder is disabled depending on the field type, format, etc.
-				</Tooltip>
-			{/snippet}
+		{#if shouldDisplayPlaceholder(type, format, enum_, contentEncoding, pattern, extra)}
+			<Label label="Placeholder">
+				{#snippet header()}
+					<Tooltip light>
+						Will be displayed in the input field when the field is empty. If not set, the default
+						value will be used. The placeholder is disabled depending on the field type, format,
+						etc.
+					</Tooltip>
+				{/snippet}
 
-			<textarea
-				placeholder="Enter a placeholder"
-				rows="1"
-				bind:value={placeholder}
-				onchange={() => dispatch('change')}
-				disabled={!shouldDisplayPlaceholder(type, format, enum_, contentEncoding, pattern, extra)}
-			></textarea>
-		</Label>
+				<textarea
+					placeholder="Enter a placeholder"
+					rows="1"
+					bind:value={placeholder}
+					onchange={() => dispatch('change')}
+					class={twMerge(inputBorderClass(), inputBaseClass, 'w-full')}
+				></textarea>
+			</Label>
+		{/if}
 
 		{#if type == 'array'}
 			<ArrayTypeNarrowing
@@ -218,10 +221,3 @@ $effect(() => {
 		{@render children?.()}
 	</div>
 </div>
-
-<style>
-	input::-webkit-outer-spin-button,
-	input::-webkit-inner-spin-button {
-		-webkit-appearance: none !important;
-		margin: 0;
-	}</style>

package/package/components/schema/SchemaFormDND.svelte

@@ -4,7 +4,7 @@ import SchemaForm from '../SchemaForm.svelte';
 import { GripVertical } from 'lucide-svelte';
 import { deepEqual } from 'fast-equals';
 import { generateRandomString } from '../../utils';
-let { schema = $bindable(), args = $bindable(undefined), prettifyHeader = false, onlyMaskPassword = false, disablePortal = false, disabled = false, hiddenArgs = [], nestedParent = undefined, disableDnd = false, shouldDispatchChanges = false, helperScript = undefined, diff = {}, nestedClasses = '', isValid = $bindable(true), noVariablePicker = false, className = '', dndType = generateRandomString() } = $props();
+let { schema = $bindable(), args = $bindable(undefined), prettifyHeader = false, onlyMaskPassword = false, disablePortal = false, disabled = false, hiddenArgs = [], nestedParent = undefined, disableDnd = false, shouldDispatchChanges = false, helperScript = undefined, diff = {}, nestedClasses = '', isValid = $bindable(true), noVariablePicker = false, className = '', dndType = generateRandomString(), lightHeaderFont } = $props();
 $effect.pre(() => {
     if (args == undefined) {
         args = {};
@@ -83,10 +83,11 @@ $effect(() => {
 	{shouldDispatchChanges}
 	bind:isValid
 	{noVariablePicker}
+	{lightHeaderFont}
 >
 	{#snippet actions()}
 		{#if !disableDnd}
-			<div class="w-4 h-8 cursor-move ml-2 handle" aria-label="drag-handle" use:dragHandle>
+			<div class="w-4 h-8 cursor-move ml-2 handle mt-[9px]" aria-label="drag-handle" use:dragHandle>
 				<GripVertical size={16} />
 			</div>
 		{/if}

package/package/components/schema/SchemaFormDND.svelte.d.ts

@@ -22,6 +22,7 @@ interface Props {
     helperScript?: DynamicInput.HelperScript;
     className?: string;
     dndType?: string;
+    lightHeaderFont?: boolean;
 }
 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> & {

package/package/components/select/DraggableTags.svelte

@@ -21,7 +21,7 @@ let dragPos = $state([0, 0]);
 		role="listitem"
 		class={twMerge(
 			allowClear ? 'pr-1' : 'pr-3',
-			'pl-3 min-h-6 bg-surface-secondary rounded-full flex items-center gap-0.5',
+			'pl-3 min-h-6 border bg-surface rounded-full flex items-center gap-0.5',
 			currentlyDraggingIndex !== undefined ? 'hover:opacity-20' : ''
 		)}
 		style={currentlyDraggingIndex === index
@@ -45,7 +45,7 @@ let dragPos = $state([0, 0]);
 		<span class="text-sm select-none">{item.label || item.value}</span>
 		{#if allowClear}
 			<CloseButton
-				class="text-tertiary"
+				class="text-hint bg-transparent"
 				small
 				on:close={(e) => (onRemove(item), e.stopPropagation())}
 			/>

package/package/components/select/MultiSelect.svelte

@@ -6,6 +6,7 @@ import CloseButton from '../common/CloseButton.svelte';
 import DraggableTags from './DraggableTags.svelte';
 import { Search } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
+import TextInput, { inputBorderClass } from '../text_input/TextInput.svelte';
 let { items, placeholder = 'Select items', value = $bindable(), class: className = '', style, listAutoWidth = true, disabled = false, disablePortal = false, createText, reorderable = true, noItemsMsg, selectedUlClass = '', placeholderClass = '', allowClear = true, hideMainClearBtn = false, onOpen, groupBy, sortBy, onCreateItem } = $props();
 let filterText = $state('');
 let open = $state(false);
@@ -44,7 +45,8 @@ function clearValue() {
 <div
 	bind:this={wrapperEl}
 	class={twMerge(
-		'relative min-h-8 flex items-center w-full bg-surface border border-gray-300 rounded-md text-tertiary',
+		'relative min-h-10 flex items-center w-full bg-surface-secondary !text-secondary rounded-md',
+		inputBorderClass({ forceFocus: open && !disabled }),
 		disabled ? 'pointer-events-none' : '',
 		open && !disabled ? 'open' : '',
 		disabled ? 'disabled' : '',
@@ -58,7 +60,9 @@ function clearValue() {
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 
 	{#if value.length === 0}
-		<span class={twMerge('text-sm ml-2 h-full flex items-center flex-1', placeholderClass)}>
+		<span
+			class={twMerge('text-sm ml-4 h-full flex items-center flex-1 text-hint', placeholderClass)}
+		>
 			{placeholder}
 		</span>
 	{:else}
@@ -79,10 +83,10 @@ function clearValue() {
 			/>
 		</ul>
 	{/if}
-	{#if allowClear && !hideMainClearBtn}
+	{#if allowClear && !hideMainClearBtn && !!value?.length}
 		<CloseButton
 			noBg
-			class="mr-1 remove-all"
+			class="mr-1 remove-all bg-transparent text-hint"
 			small
 			on:close={(e) => (clearValue(), e.stopPropagation())}
 		/>
@@ -108,12 +112,14 @@ function clearValue() {
 		{#snippet header()}
 			{#if processedItems.length - value.length > 0 || onCreateItem}
 				<div class="mx-2 mb-1 mt-2 flex items-center relative">
-					<input
+					<TextInput
 						bind:this={searchInputEl}
 						bind:value={filterText}
-						onblur={(e) => (e.preventDefault(), searchInputEl?.focus())}
-						placeholder="Search"
-						class="!pr-7"
+						inputProps={{
+							onblur: (e) => (e.preventDefault(), searchInputEl?.focus()),
+							placeholder: 'Search...'
+						}}
+						class="!pr-7 !bg-surface"
 					/>
 					<Search size={16} class="absolute right-2 text-tertiary" />
 				</div>

package/package/components/select/Select.svelte

@@ -6,7 +6,8 @@ import { untrack } from 'svelte';
 import { getLabel, processItems } from './utils.svelte';
 import SelectDropdown from './SelectDropdown.svelte';
 import { deepEqual } from 'fast-equals';
-let { items, placeholder = 'Please select', value = $bindable(), filterText = $bindable(''), class: className = '', clearable = false, listAutoWidth = true, disabled: _disabled = false, containerStyle = '', inputClass = '', disablePortal = false, loading = false, autofocus, RightIcon, createText, noItemsMsg, open = $bindable(false), id, groupBy, sortBy, onFocus, onBlur, onClear, onCreateItem, startSnippet } = $props();
+import { inputBaseClass, inputBorderClass } from '../text_input/TextInput.svelte';
+let { items, placeholder = 'Please select', value = $bindable(), filterText = $bindable(''), class: className = '', clearable = false, listAutoWidth = true, disabled: _disabled = false, containerStyle = '', inputClass = '', disablePortal = false, loading = false, error = false, autofocus, RightIcon, createText, noItemsMsg, open = $bindable(false), id, itemLabelWrapperClasses, itemButtonWrapperClasses, groupBy, sortBy, onFocus, onBlur, onClear, onCreateItem, startSnippet, endSnippet, bottomSnippet } = $props();
 let disabled = $derived(_disabled || (loading && !value));
 let inputEl = $state();
 let processedItems = $derived.by(() => {
@@ -54,7 +55,7 @@ function clearValue() {
 		</div>
 	{:else if clearable && !disabled && value}
 		<div class="absolute z-10 right-2 h-full flex items-center">
-			<CloseButton class="text-secondary" noBg small on:close={clearValue} />
+			<CloseButton class="bg-transparent text-hint" noBg small on:close={clearValue} />
 		</div>
 	{:else if RightIcon}
 		<div class="absolute z-10 right-2 h-full flex items-center">
@@ -72,10 +73,12 @@ function clearValue() {
 			: (valueEntry?.label ?? getLabel({ value }) ?? placeholder)}
 		style={containerStyle}
 		class={twMerge(
-			'!bg-surface text-ellipsis',
+			inputBaseClass,
+			inputBorderClass({ error, forceFocus: open }),
+			'w-full',
 			open ? '' : 'cursor-pointer',
-			!loading && value ? '!placeholder-primary' : '',
-			(clearable || RightIcon) && !disabled && value ? '!pr-8' : '',
+			!loading && value && !disabled ? '!placeholder-secondary' : 'placeholder-hint',
+			(clearable || RightIcon) && !disabled && value ? 'pr-8' : '',
 			inputClass ?? ''
 		)}
 		autocomplete="off"
@@ -94,6 +97,10 @@ function clearValue() {
 		getInputRect={inputEl && (() => inputEl!.getBoundingClientRect())}
 		{listAutoWidth}
 		{noItemsMsg}
+		{itemLabelWrapperClasses}
+		{itemButtonWrapperClasses}
 		{startSnippet}
+		{endSnippet}
+		{bottomSnippet}
 	/>
 </div>