Refine the Dot Leader list code example

src/components/dot-leader/dot-leader.stories.mdx

@@ -1,4 +1,13 @@
 import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
+// The '!!raw-loader!' syntax is a non-standard, Webpack-specific, syntax.
+// See: https://github.com/webpack-contrib/raw-loader#examples
+// For now, it seems likely Storybook is pretty tied to Webpack, therefore, we are
+// okay with the following Webpack-specific raw loader syntax. It's better to leave
+// the ESLint rule enabled globally, and only thoughtfully disable as needed (e.g.
+// within a Storybook docs page and not within an actual component).
+// This can be revisited in the future if Storybook no longer relies on Webpack.
+// eslint-disable-next-line @cloudfour/import/no-webpack-loader-syntax
+import listDemoSource from '!!raw-loader!./demo/list.twig';
 import listDemo from './demo/list.twig';
 import topics from './demo/topics.json';
 import template from './dot-leader.twig';
@@ -44,5 +53,16 @@ If `c-dot-leader` is an `<a>` element, it will gain some additional styles.
 Although `c-dot-leader` applies to a single row, the pattern works best as part of [a list object](/docs/objects-list--default-story). The dotted lines clearly associate each column even when content lengths vary.
 
 <Canvas>
-  <Story name="List">{listDemo({ topics })}</Story>
+  <Story
+    name="List"
+    parameters={{
+      docs: {
+        source: {
+          code: listDemoSource,
+        },
+      },
+    }}
+  >
+    {listDemo({ topics })}
+  </Story>
 </Canvas>