windmill-components 1.558.4 → 1.596.0

package/package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -32,12 +32,14 @@ let s3FilePicker = $state();
 let s3PickerSelection = $state(undefined);
 let s3FolderPrefix = $state('');
 let s3FileUploadRawMode = $state(componentInput?.type == 'uploadS3' && !!componentInput.value?.s3);
+let s3JsonEditor = $state();
 function updateSelectedS3File() {
     if (s3PickerSelection) {
         if (componentInput.type === 'uploadS3') {
             componentInput.value = {
                 ...s3PickerSelection
             };
+            s3JsonEditor?.setCode(JSON.stringify(s3PickerSelection, null, 2));
         }
         s3FileUploadRawMode = true;
     }
@@ -98,7 +100,7 @@ function openConnection() {
 					{/if}
 				</div>
 				{#if displayType}
-					<div class="text-xs text-tertiary mr-1">
+					<div class="text-xs text-primary mr-1">
 						{fieldType === 'array' && subFieldType
 							? `${fieldTypeToTsType(subFieldType)}[]`
 							: fieldTypeToTsType(fieldType)}
@@ -117,7 +119,6 @@ function openConnection() {
 						id="schema-plug-{key}"
 					/>
 					<ToggleButtonGroup
-						class="h-6"
 						bind:selected={componentInput.type}
 						on:selected={(e) => {
 							if (
@@ -139,43 +140,18 @@ function openConnection() {
 						}}
 					>
 						{#snippet children({ item })}
-							<ToggleButton
-								small
-								light
-								value="static"
-								icon={Pen}
-								iconOnly
-								tooltip="Static"
-								{item}
-							/>
+							<ToggleButton small value="static" icon={Pen} iconOnly tooltip="Static" {item} />
 							{#if userInputEnabled}
-								<ToggleButton
-									small
-									light
-									value="user"
-									icon={User}
-									iconOnly
-									tooltip="User Input"
-									{item}
-								/>
+								<ToggleButton small value="user" icon={User} iconOnly tooltip="User Input" {item} />
 							{/if}
 							{#if fileUpload}
-								<ToggleButton
-									small
-									light
-									value="upload"
-									icon={Upload}
-									iconOnly
-									tooltip="Upload"
-									{item}
-								/>
+								<ToggleButton small value="upload" icon={Upload} iconOnly tooltip="Upload" {item} />
 							{/if}
 							{#if fileUploadS3}
 								<ToggleButton
 									value="uploadS3"
 									icon={UploadCloud}
 									iconOnly
-									light
 									small
 									tooltip="Upload S3"
 									{item}
@@ -183,7 +159,6 @@ function openConnection() {
 							{/if}
 							{#if componentInput?.type === 'connected'}
 								<ToggleButton
-									light
 									value="connected"
 									icon={Plug2}
 									iconOnly
@@ -197,7 +172,6 @@ function openConnection() {
 									value="eval"
 									icon={FunctionSquare}
 									iconOnly
-									light
 									small
 									tooltip="Eval Legacy"
 									{item}
@@ -205,7 +179,6 @@ function openConnection() {
 							{/if}
 							<ToggleButton
 								value="evalv2"
-								light
 								icon={FunctionSquare}
 								iconOnly
 								small
@@ -266,6 +239,7 @@ function openConnection() {
 						<Module.default
 							code={JSON.stringify(componentInput.value ?? { s3: '' }, null, 2)}
 							bind:value={componentInput.value}
+							bind:editor={s3JsonEditor}
 						/>
 					{/await}
 				{:else}
@@ -285,8 +259,7 @@ function openConnection() {
 					/>
 				{/if}
 				<Button
-					variant="border"
-					color="light"
+					variant="default"
 					size="xs"
 					btnClasses="mt-1"
 					on:click={() => {
@@ -301,15 +274,15 @@ function openConnection() {
 			<S3FilePicker
 				bind:this={s3FilePicker}
 				folderOnly={false}
-				on:close={(e) => {
-					s3PickerSelection = e.detail
+				onSelectAndClose={(selected) => {
+					s3PickerSelection = selected
 					updateSelectedS3File()
 				}}
 				readOnlyMode={false}
 				regexFilter={/\.(png|jpg|jpeg|svg|webp)$/i}
 			/>
 		{:else if componentInput?.type === 'user'}
-			<span class="text-2xs italic text-tertiary">Field's value is set by the user</span>
+			<span class="text-2xs italic text-primary">Field's value is set by the user</span>
 		{/if}
 		{#if (componentInput?.type === 'evalv2' || componentInput?.type === 'connected' || componentInput?.type === 'user') && ((fieldType == 'object' && format?.startsWith('resource-') && format !== 'resource-s3_object') || fieldType == 'resource')}
 			<div class="flex flex-row items-center">

package/package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte

@@ -8,6 +8,7 @@ let finalInputSpecsConfiguration = $derived(inputSpecsConfiguration ?? inputSpec
 const dispatch = createEventDispatcher();
 const mapping = {
     onSuccess: 'On success wizard',
+    onSubmit: 'On submit wizard',
     onError: 'On error wizard'
 };
 </script>
@@ -20,7 +21,7 @@ const mapping = {
 					<span class="text-xs font-semibold truncate text-primary">
 						{k}
 					</span>
-					<div class="text-tertiary text-xs">Managed by the component</div>
+					<div class="text-primary text-xs">Managed by the component</div>
 				</div>
 			{:else if finalInputSpecsConfiguration[k]?.type == 'oneOf'}
 				<OneOfInputSpecsEditor
@@ -77,7 +78,7 @@ const mapping = {
 					<span class="text-xs font-semibold truncate text-primary">
 						{k}
 					</span>
-					<div class="text-tertiary text-xs">
+					<div class="text-primary text-xs">
 						Managed by the component
 						<Tooltip light>
 							The input is managed by the component and cannot be edited here: It will be injected
@@ -89,5 +90,5 @@ const mapping = {
 		{/if}
 	</div>
 {:else}
-	<div class="text-tertiary text-sm">No inputs</div>
+	<div class="text-primary text-xs">No inputs</div>
 {/if}

package/package/components/apps/editor/settingsPanel/MenuItems.svelte

@@ -29,7 +29,7 @@ function deleteComponent(cid) {
 
 <PanelSection title={`Menu items`}>
 	{#if components.length == 0}
-		<span class="text-xs text-tertiary">No action buttons</span>
+		<span class="text-xs text-primary">No action buttons</span>
 	{/if}
 	{#each components as component}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -55,21 +55,20 @@ function deleteComponent(cid) {
 			</div>
 			<div>
 				<Button
-					variant="border"
-					color="red"
+					variant="default"
 					on:click={() => deleteComponent(component.id)}
 					startIcon={{ icon: Trash }}
 					iconOnly
+					destructive
 				/>
 			</div>
 		</div>
 	{/each}
 	<div class="w-full flex gap-2">
 		<Button
-			btnClasses="gap-1 flex items-center text-sm text-tertiary"
+			btnClasses="gap-1 flex items-center text-sm text-primary"
 			wrapperClasses="w-full"
-			color="light"
-			variant="border"
+			variant="default"
 			size="xs"
 			on:click={() => addComponent()}
 			title="Add Button"

package/package/components/apps/editor/settingsPanel/OneOfInputSpecsEditor.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import Tooltip from '../../../Tooltip.svelte';
+<script lang="ts">import Select from '../../../select/Select.svelte';
+import Tooltip from '../../../Tooltip.svelte';
 import { addWhitespaceBeforeCapitals, capitalize } from '../../../../utils';
 import { cleanseOneOfConfiguration } from '../appUtils';
 import InputsSpecEditor from './InputsSpecEditor.svelte';
@@ -19,12 +20,21 @@ $effect.pre(() => {
     // If the configuration is empty, we set the first one as selected.
     // It happens when the configuration was added after the component was created
     if (oneOf.selected === '') {
+        let selected = Object.keys(inputSpecsConfiguration ?? {})[0];
         oneOf = {
             configuration: cleanseOneOfConfiguration(inputSpecsConfiguration),
-            selected: Object.keys(inputSpecsConfiguration ?? {})[0],
+            selected,
             type: 'oneOf'
         };
     }
+    if (oneOf.selected && Object.keys(oneOf.configuration).length > 1) {
+        oneOf = {
+            ...oneOf,
+            configuration: {
+                [oneOf.selected]: cleanseOneOfConfiguration(inputSpecsConfiguration)?.[oneOf.selected]
+            }
+        };
+    }
 });
 function getValueOfDeprecated(obj) {
     if (!obj)
@@ -34,27 +44,36 @@ function getValueOfDeprecated(obj) {
 }
 </script>
 
-<div class="p-2 border">
+<div class="p-2 border rounded-md">
 	{#if oneOf}
-		<div class="mb-2 text-sm font-semibold">
+		<div class="mb-2 text-xs font-semibold">
 			{capitalize(addWhitespaceBeforeCapitals(key))}&nbsp;
 			{#if tooltip}
 				<Tooltip light>{tooltip}</Tooltip>
 			{/if}
 		</div>
-		<select
-			class="w-full border border-gray-300 rounded-md p-2"
-			value={oneOf.selected}
-			onchange={(e) => {
-				oneOf = { ...oneOf, selected: e?.target?.['value'] }
-			}}
-		>
-			{#each Object.keys(inputSpecsConfiguration ?? {}) as choice}
-				{#if (!disabledOptions.includes(choice) && !getValueOfDeprecated(inputSpecsConfiguration[choice])) || oneOf.selected === choice}
-					<option value={choice}>{labels?.[choice] ?? choice}</option>
-				{/if}
-			{/each}
-		</select>
+		<Select
+			bind:value={
+				() => oneOf.selected,
+				(selected) =>
+					(oneOf = {
+						...oneOf,
+						configuration: { selected: inputSpecsConfiguration[selected] },
+						selected
+					})
+			}
+			items={Object.keys(inputSpecsConfiguration ?? {})
+				.filter(
+					(choice) =>
+						(!disabledOptions.includes(choice) &&
+							!getValueOfDeprecated(inputSpecsConfiguration[choice])) ||
+						oneOf.selected === choice
+				)
+				.map((choice) => ({ label: labels?.[choice] ?? choice, value: choice }))}
+		/>
+		<!-- {JSON.stringify(inputSpecsConfiguration)} -->
+		<!-- {JSON.stringify(oneOf.configuration)} -->
+
 		{#if oneOf.selected !== 'none' && oneOf.selected !== 'errorOverlay'}
 			<div class="mb-4"></div>
 		{/if}

package/package/components/apps/editor/settingsPanel/SelectedRunnable.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">import { getContext } from 'svelte';
+import { isRunnableByName, isRunnableByPath } from '../../inputType';
 import { clearResultAppInput } from '../../utils';
 import ComponentScriptSettings, {} from './script/ComponentScriptSettings.svelte';
 import { ExternalLink, X } from 'lucide-svelte';
@@ -18,7 +19,7 @@ $effect.pre(() => {
     }
 });
 function detach() {
-    if (appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript) {
+    if (isRunnableByName(appInput.runnable) && appInput.runnable.inlineScript) {
         $app.unusedInlineScripts.push({
             name: appInput.runnable.name,
             inlineScript: appInput.runnable.inlineScript
@@ -30,12 +31,11 @@ function detach() {
 function clear() {
     appInput = clearResultAppInput(appInput);
 }
-let hasScript = $derived(appInput?.runnable?.type === 'runnableByPath' ||
-    (appInput?.runnable?.type === 'runnableByName' &&
-        appInput.runnable?.inlineScript !== undefined));
+let hasScript = $derived(isRunnableByPath(appInput?.runnable) ||
+    (isRunnableByName(appInput?.runnable) && appInput.runnable?.inlineScript !== undefined));
 function getActions(_hasScript) {
     return [
-        ...(appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript
+        ...(isRunnableByName(appInput.runnable) && appInput.runnable.inlineScript
             ? [
                 {
                     label: 'Detach',

package/package/components/apps/editor/settingsPanel/SelectedRunnable.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ResultAppInput } from '../../inputType';
+import { type ResultAppInput } from '../../inputType';
 import type { AppComponent } from '../component';
 interface Props {
     appInput: ResultAppInput;

package/package/components/apps/editor/settingsPanel/StylePanel.svelte

@@ -112,9 +112,8 @@ onMount(() => {
 		<div class="px-2 flex gap-1 flex-col w-full pb-4">
 			{#if !$cssEditorOpen}
 				<Button
-					color="light"
 					size="xs2"
-					variant="border"
+					variant="default"
 					on:click={() => {
 						$cssEditorOpen = true
 					}}
@@ -132,9 +131,8 @@ onMount(() => {
 
 			{#if $enterpriseLicense !== undefined}
 				<Button
-					color="light"
 					size="xs2"
-					variant="border"
+					variant="default"
 					on:click={() => {
 						migrationModal?.open()
 					}}
@@ -145,29 +143,33 @@ onMount(() => {
 		</div>
 
 		<Tabs bind:selected={tab}>
-			<Tab value="local" size="xs">
-				<div class="flex flex-row gap-2 items-center">
-					ID
-					<Badge color="indigo" size="xs">
-						{component?.id}
-					</Badge>
+			<Tab value="local">
+				{#snippet extra()}
+					<div class="flex flex-row gap-2 items-center">
+						ID
+						<Badge color="indigo" size="xs">
+							{component?.id}
+						</Badge>
 
-					<Tooltip light>
-						You can customise the CSS and the classes of this component instance. These
-						customisations will only be applied to this component. You can also apply custom classes
-						set on the Global styling panel.
-					</Tooltip>
-				</div>
+						<Tooltip light>
+							You can customise the CSS and the classes of this component instance. These
+							customisations will only be applied to this component. You can also apply custom
+							classes set on the Global styling panel.
+						</Tooltip>
+					</div>
+				{/snippet}
 			</Tab>
-			<Tab value="global" size="xs">
-				<div class="flex flex-row gap-2 items-center">
-					Global: {type ? ccomponents[type].name : ''}
+			<Tab value="global">
+				{#snippet extra()}
+					<div class="flex flex-row gap-2 items-center">
+						Global: {type ? ccomponents[type].name : ''}
 
-					<Tooltip light>
-						You can customise the CSS and the classes of all components of this type. These
-						customisations will be applied to all components of this type.
-					</Tooltip>
-				</div>
+						<Tooltip light>
+							You can customise the CSS and the classes of all components of this type. These
+							customisations will be applied to all components of this type.
+						</Tooltip>
+					</div>
+				{/snippet}
 			</Tab>
 			{#snippet content()}
 				<TabContent value="local">

package/package/components/apps/editor/settingsPanel/TableActions.svelte

@@ -13,6 +13,7 @@ import CloseButton from '../../../common/CloseButton.svelte';
 import { flip } from 'svelte/animate';
 import TableActionsWizard from '../../../wizards/TableActionsWizard.svelte';
 import Alert from '../../../common/alert/Alert.svelte';
+import DropdownV2 from '../../../DropdownV2.svelte';
 let { components = $bindable(), actionsOrder = $bindable(undefined), id } = $props();
 // Migration code:
 onMount(() => {
@@ -32,24 +33,29 @@ function addComponent(typ) {
         return;
     }
     const actionId = getNextId(components.map((x) => x.id.split('_')[1]));
-    const newComponent = {
-        ...appComponentFromType(typ)(`${id}_${actionId}`),
-        recomputeIds: []
-    };
-    if (typ == 'buttoncomponent') {
+    const newComponent = appComponentFromType(typ)(`${id}_${actionId}`);
+    if (newComponent?.type == 'buttoncomponent') {
         if (newComponent?.configuration?.size) {
             // @ts-ignore
             newComponent.configuration.size = { type: 'static', value: 'xs2' };
         }
     }
-    items = [
-        ...items,
-        {
-            value: newComponent,
-            id: generateRandomString(),
-            originalIndex: items.length
+    if (newComponent?.type == 'modalcomponent') {
+        if (newComponent?.configuration?.buttonSize) {
+            // @ts-ignore
+            newComponent.configuration.buttonSize = { type: 'static', value: 'xs2' };
         }
-    ];
+        // Create associated subgrid
+        if ($app.subgrids)
+            $app.subgrids[`${newComponent.id}-0`] = [];
+        newComponent.id;
+    }
+    const newItem = {
+        value: newComponent,
+        id: generateRandomString(),
+        originalIndex: items.length
+    };
+    items = [...items, newItem];
     components = [...components, newComponent];
     $app = $app;
 }
@@ -57,6 +63,10 @@ function deleteComponent(cid, index) {
     if (!components) {
         return;
     }
+    if (components.find((x) => x.id === cid)?.type === 'modalcomponent') {
+        // Remove associated subgrid
+        delete $app.subgrids?.[`${cid}-0`];
+    }
     components = components.filter((x) => x.id !== cid);
     delete $errorByComponent[cid];
     $selectedComponent = [id];
@@ -95,7 +105,7 @@ const rnd = generateRandomString();
 			</TableActionsWizard>
 		{/snippet}
 		{#if components.length == 0}
-			<span class="text-xs text-tertiary">No action buttons</span>
+			<span class="text-xs text-primary">No action buttons</span>
 		{/if}
 		<div class="w-full flex gap-2 flex-col mt-2">
 			<section
@@ -139,6 +149,8 @@ const rnd = generateRandomString();
 										Select
 									{:else if component.type == 'checkboxcomponent'}
 										Toggle
+									{:else if component.type == 'modalcomponent'}
+										Modal
 									{/if}
 								</div>
 							</div>
@@ -160,35 +172,42 @@ const rnd = generateRandomString();
 		</div>
 		<div class="w-full flex gap-2">
 			<Button
-				btnClasses="gap-1 flex items-center text-sm text-tertiary"
-				wrapperClasses="w-full"
-				color="light"
-				variant="border"
+				btnClasses="gap-1 flex items-center text-xs text-primary"
+				wrapperClasses="flex-1"
+				variant="default"
 				on:click={() => addComponent('buttoncomponent')}
 				title="Add Button"
 			>
 				+ <Inspect size={14} />
 			</Button>
 			<Button
-				btnClasses="gap-1 flex items-center text-sm text-tertiary"
-				wrapperClasses="w-full"
-				color="light"
-				variant="border"
+				btnClasses="gap-1 flex items-center text-xs text-primary"
+				wrapperClasses="flex-1"
+				variant="default"
 				on:click={() => addComponent('checkboxcomponent')}
 				title="Add Toggle"
 			>
 				+ <ToggleRightIcon size={14} />
 			</Button>
 			<Button
-				btnClasses="gap-1 flex items-center text-sm text-tertiary"
-				wrapperClasses="w-full"
-				color="light"
-				variant="border"
+				btnClasses="gap-1 flex items-center text-xs text-primary"
+				wrapperClasses="flex-1"
+				variant="default"
 				on:click={() => addComponent('selectcomponent')}
 				title="Add Select"
 			>
 				+ <List size={14} />
 			</Button>
+			<DropdownV2
+				items={[
+					{
+						displayName: 'Modal button',
+						icon: Inspect,
+						action: () => addComponent('modalcomponent')
+					}
+				]}
+				fixedHeight={false}
+			></DropdownV2>
 		</div>
 		<div class="w-full flex flex-col">
 			{#if actionsOrder}

package/package/components/apps/editor/settingsPanel/TableActions.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { BaseAppComponent, RichConfiguration } from '../../types';
-import type { ButtonComponent, CheckboxComponent, SelectComponent } from '../component';
+import type { ButtonComponent, CheckboxComponent, ModalComponent, SelectComponent } from '../component';
 interface Props {
-    components: (BaseAppComponent & (ButtonComponent | CheckboxComponent | SelectComponent))[] | undefined;
+    components: (BaseAppComponent & (ButtonComponent | CheckboxComponent | SelectComponent | ModalComponent))[] | undefined;
     actionsOrder?: RichConfiguration | undefined;
     id: string;
 }

package/package/components/apps/editor/settingsPanel/common/PanelSection.svelte

@@ -1,6 +1,21 @@
 <script lang="ts">import { classNames } from '../../../../../utils';
+import { ChevronDown, ChevronRight } from 'lucide-svelte';
 import Tooltip from '../../../../Tooltip.svelte';
-let { title, noPadding = false, fullHeight = true, titlePadding = '', tooltip = '', documentationLink = undefined, id = undefined, class: clazz = undefined, action, children } = $props();
+let { title, noPadding = false, fullHeight = true, titlePadding = '', tooltip = '', documentationLink = undefined, id = undefined, class: clazz = undefined, action, children, size = 'xs', collapsible = false, initiallyCollapsed = false } = $props();
+function textSize() {
+    switch (size) {
+        case 'lg':
+            return 'text-lg';
+        case 'md':
+            return 'text-md';
+        case 'sm':
+            return 'text-sm';
+        case 'xs':
+        default:
+            return 'text-xs';
+    }
+}
+let collapsed = $state(initiallyCollapsed);
 </script>
 
 <div
@@ -13,7 +28,9 @@ let { title, noPadding = false, fullHeight = true, titlePadding = '', tooltip =
 	{id}
 >
 	<div class="flex justify-between flex-wrap items-center w-full gap-1">
-		<div class="text-xs inline-flex items-center font-semibold text-primary {titlePadding} gap-1">
+		<div
+			class="{textSize()} inline-flex items-center font-semibold text-primary {titlePadding} gap-1"
+		>
 			<span class="truncate">
 				{title}
 			</span>
@@ -23,7 +40,18 @@ let { title, noPadding = false, fullHeight = true, titlePadding = '', tooltip =
 				</Tooltip>
 			{/if}
 		</div>
+		{#if collapsible}
+			<button class="flex items-center gap-1" onclick={() => (collapsed = !collapsed)}>
+				{#if collapsed}
+					<ChevronRight size={16} />
+				{:else}
+					<ChevronDown size={16} />
+				{/if}
+			</button>
+		{/if}
 		{@render action?.()}
 	</div>
-	{@render children?.()}
+	{#if !collapsed}
+		{@render children?.()}
+	{/if}
 </div>

package/package/components/apps/editor/settingsPanel/common/PanelSection.svelte.d.ts

@@ -9,6 +9,9 @@ interface Props {
     class?: string | undefined;
     action?: import('svelte').Snippet;
     children?: import('svelte').Snippet;
+    size?: 'lg' | 'md' | 'sm' | 'xs';
+    collapsible?: boolean;
+    initiallyCollapsed?: boolean;
 }
 declare const PanelSection: import("svelte").Component<Props, {}, "">;
 type PanelSection = ReturnType<typeof PanelSection>;

package/package/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte

@@ -21,14 +21,14 @@ function applyConnection(connection) {
 	<Button
 		size="xs"
 		startIcon={{ icon: Unplug }}
-		color="red"
-		variant="border"
+		variant="default"
 		on:click={() => {
 			if (componentInput.type === 'connected') {
 				componentInput.connection = undefined
 			}
 			$app = $app
 		}}
+		destructive
 	>
 		Disconnect
 	</Button>

package/package/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte

@@ -69,7 +69,7 @@ let focus = $state(false);
 						<div
 							class="p-1 !text-2xs absolute border border-l bg-surface w-full z-[5000] overflow-auto"
 						>
-							<pre class="text-tertiary"
+							<pre class="text-primary"
 								>{JSON.stringify($evalPreview[`${id}.${field}`] ?? null, null, 4) ?? 'null'}</pre
 							>
 						</div>
@@ -132,9 +132,9 @@ let focus = $state(false);
 					<div
 						class="p-1 !text-2xs absolute rounded-b border-b border-r border-l bg-surface w-full z-[5000] overflow-auto"
 					>
-						<!-- <div class="text-tertiary absolute top-0 right-0 !text-2xs">{id}.{field}</div> -->
-						<div class="float-right text-tertiary cursor-pointer"><X size={14} /></div>
-						<pre class="text-tertiary"
+						<!-- <div class="text-primary absolute top-0 right-0 !text-2xs">{id}.{field}</div> -->
+						<div class="float-right text-primary cursor-pointer"><X size={14} /></div>
+						<pre class="text-primary"
 							>{JSON.stringify($evalPreview[`${id}.${field}`] ?? null, null, 4) ?? 'null'}</pre
 						>
 					</div>
@@ -175,7 +175,7 @@ let focus = $state(false);
 					}}
 				/>
 			{/if}
-			<div class="text-2xs text-tertiary"
+			<div class="text-2xs text-primary"
 				>{componentInput.onDemandOnly ? 'NOT' : ''} Re-evaluated on changes to:</div
 			>
 			<div class="flex flex-wrap gap-1">