chore(dprint): update markup_fmt plugin version, fix @render indentation and add couple of new rules

dprint.json

@@ -13,7 +13,7 @@
     "https://plugins.dprint.dev/typescript-0.93.0.wasm",
     "https://plugins.dprint.dev/json-0.19.3.wasm",
     "https://plugins.dprint.dev/markdown-0.17.8.wasm",
-    "https://plugins.dprint.dev/g-plane/markup_fmt-v0.25.3.wasm"
+    "https://plugins.dprint.dev/g-plane/markup_fmt-v0.27.0.wasm"
   ],
   "typescript": {
     "lineWidth": 120,
@@ -57,9 +57,8 @@
     "quotes": "double",
     "scriptIndent": false,
     "styleIndent": false,
-
-    "vBindStyle": "short",
-    "vOnStyle": "short",
-    "formatComments": true
+    "formatComments": true,
+    "svelteAttrShorthand": true,
+    "svelteDirectiveShorthand": true
   }
 }

src/shared/ui/Button/ToggleButton.stories.svelte

@@ -106,7 +106,7 @@ let selected = $state(false);
         <div class="flex items-center gap-4">
             <ToggleButton
                 {...args}
-                selected={selected}
+                {selected}
                 onclick={() => {
                     selected = !selected;
                 }}

src/shared/ui/Footnote/Footnote.svelte

@@ -30,7 +30,7 @@ const { children, class: className, render }: Props = $props();
             'font-mono text-3xs sm:text-2xs lowercase tracking-wider-mono text-text-soft',
             className,
         ),
-})}
+    })}
 {:else if children}
     <span
         class={cn(

src/shared/ui/Section/Section.svelte

@@ -93,7 +93,7 @@ const flyParams: FlyParams = {
     >
         <div>
             {#if headerTitle}
-                <SectionHeader title={headerTitle} subtitle={headerSubtitle} index={index} />
+                <SectionHeader title={headerTitle} subtitle={headerSubtitle} {index} />
             {/if}
             <SectionTitle text={title} />
         </div>

src/shared/ui/VirtualList/VirtualList.svelte

@@ -293,7 +293,7 @@ $effect(() => {
                                     isFullyVisible: row.isFullyVisible,
                                     isPartiallyVisible: row.isPartiallyVisible,
                                     proximity: row.proximity,
-})}
+                                })}
                             {/if}
                         </div>
                     {:else}
@@ -305,7 +305,7 @@ $effect(() => {
                                     isFullyVisible: row.isFullyVisible,
                                     isPartiallyVisible: row.isPartiallyVisible,
                                     proximity: row.proximity,
-})}
+                                })}
                             {/if}
                         </div>
                     {/if}