docs: add demo showing dialog button that doesn't close dialog

Closes #692

Author: hperrin

packages/site/src/routes/demo/dialog/+page.svelte

@@ -37,6 +37,10 @@
     Dialog with sliders
   </Demo>
 
+  <Demo component={NonCloseButton} file="dialog/_NonCloseButton.svelte">
+    Dialog with button that doesn't close
+  </Demo>
+
   <Demo component={LargeScroll} file="dialog/_LargeScroll.svelte">
     Large, scrollable dialog
   </Demo>
@@ -86,6 +90,7 @@
   import List from './_List.svelte';
   import Selection from './_Selection.svelte';
   import Sliders from './_Sliders.svelte';
+  import NonCloseButton from './_NonCloseButton.svelte';
   import LargeScroll from './_LargeScroll.svelte';
   import Fullscreen from './_Fullscreen.svelte';
   import OverFullscreen from './_OverFullscreen.svelte';

packages/site/src/routes/demo/dialog/_NonCloseButton.svelte

@@ -0,0 +1,37 @@
+<Dialog
+  bind:open
+  aria-labelledby="nonclose-title"
+  aria-describedby="nonclose-content"
+>
+  <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
+  <Title id="nonclose-title">Easiest Riddle</Title>
+  <Content id="nonclose-content"
+    >Only one of these buttons will close the dialog. Can you guess which one?</Content
+  >
+  <Actions>
+    <!--
+      The `action=""` here will cause the dialog to stay open. The default
+      action is "close".
+    -->
+    <Button action="" onclick={() => (clicked = "It didn't close, did it?")}>
+      <Label>It's the Other One</Label>
+    </Button>
+    <Button onclick={() => (clicked = 'I told you.')}>
+      <Label>It's This One</Label>
+    </Button>
+  </Actions>
+</Dialog>
+
+<Button onclick={() => (open = true)}>
+  <Label>Open Dialog</Label>
+</Button>
+
+<pre class="status">Clicked: {clicked}</pre>
+
+<script lang="ts">
+  import Dialog, { Title, Content, Actions } from '@smui/dialog';
+  import Button, { Label } from '@smui/button';
+
+  let open = $state(false);
+  let clicked = $state('Nothing yet.');
+</script>