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

@@ -26,11 +26,11 @@ const { children, class: className, render }: Props = $props();
 
 {#if render}
     {@render render({
-    class: cn(
-        'font-mono text-3xs sm:text-2xs lowercase tracking-wider-mono text-text-soft',
-        className,
-    ),
-})}
+        class: cn(
+            '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

@@ -288,24 +288,24 @@ $effect(() => {
                         >
                             {#if itemIndex < items.length}
                                 {@render children({
-    item: items[itemIndex],
-    index: itemIndex,
-    isFullyVisible: row.isFullyVisible,
-    isPartiallyVisible: row.isPartiallyVisible,
-    proximity: row.proximity,
-})}
+                                    item: items[itemIndex],
+                                    index: itemIndex,
+                                    isFullyVisible: row.isFullyVisible,
+                                    isPartiallyVisible: row.isPartiallyVisible,
+                                    proximity: row.proximity,
+                                })}
                             {/if}
                         </div>
                     {:else}
                         <div class="min-h-0">
                             {#if itemIndex < items.length}
                                 {@render children({
-    item: items[itemIndex],
-    index: itemIndex,
-    isFullyVisible: row.isFullyVisible,
-    isPartiallyVisible: row.isPartiallyVisible,
-    proximity: row.proximity,
-})}
+                                    item: items[itemIndex],
+                                    index: itemIndex,
+                                    isFullyVisible: row.isFullyVisible,
+                                    isPartiallyVisible: row.isPartiallyVisible,
+                                    proximity: row.proximity,
+                                })}
                             {/if}
                         </div>
                     {/if}