docs(breakpoint): update docs

docs/src/pages/components/Breakpoint.svx

@@ -1,21 +1,27 @@
 
 <script>
   import {
-    Breakpoint
+    Breakpoint, UnorderedList, ListItem
   } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
 The [Carbon Design System grid implementation](https://carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options) defines five responsive breakpoints:
 
-- Small (`sm`): less than 672px
-- Medium (`md`): 672 - 1056px
-- Large (`lg`): 1056 - 1312px
-- X-Large (`xlg`): 1312 - 1584px
-- Max (`max`): greater than 1584px
+<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
+  <ListItem><strong>Small</strong> (`sm`): less than 672px</ListItem>
+  <ListItem><strong>Medium</strong> (`md`): 672 - 1056px</ListItem>
+  <ListItem><strong>Large</strong> (`lg`): 1056 - 1312px</ListItem>
+  <ListItem><strong>X-Large</strong> (`xlg`): 1312 - 1584px</ListItem>
+  <ListItem><strong>Max</strong> (`max`): greater than 1584px</ListItem>
+</UnorderedList>
 
 This utility component uses the [Window.matchMedia API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) to declaratively determine the current Carbon breakpoint size.
 
 ### Default
 
+Bind to the `size` prop to determine the current breakpoint size. Possible values include: `"sm" | "md" | "lg" | "xlg" | "max"`.
+
+The `"on:match"` event will fire only when a breakpoint change event occurs (e.g., the browser width is resized).
+
 <FileSource src="/framed/Breakpoint/Breakpoint" />

docs/src/pages/framed/Breakpoint/Breakpoint.svelte

@@ -7,8 +7,17 @@
 
 <Breakpoint bind:size on:match="{(e) => (events = [...events, e.detail])}" />
 
+<p>Resize the width of your browser.</p>
+<h6>Current breakpoint size</h6>
 <h1>{size}</h1>
 
 <pre>
   {JSON.stringify(events,null, 2)}
-    </pre>
+</pre>
+
+<style>
+  p,
+  h1 {
+    margin-bottom: var(--cds-spacing-08);
+  }
+</style>