Breakpoint (#733)

* feat(breakpoint): add Breakpoint

* docs(breakpoint): update docs

* refactor(breakpoint): add prop descriptions, type slot

* docs: add missing semicolon to last typedef

* docs: decrease margin bottom for inline snippet

* docs: add Breakpoint to new components [ci skip]

* docs(config): use "scripts-markup-styles" for svelteSortOrder [ci skip]

* docs(breakpoint): label on:match event [ci skip]

docs/src/pages/_layout.svelte

@@ -20,7 +20,7 @@
   import Footer from "../components/Footer.svelte";
 
   const deprecated = ["ToggleSmall", "Icon"];
-  const new_components = ["ProgressBar", "RecursiveList", "TreeView"];
+  const new_components = ["Breakpoint", "RecursiveList", "TreeView"];
 
   let isOpen = false;
   let isSideNavOpen = true;

docs/src/pages/components/Breakpoint.svx

@@ -0,0 +1,27 @@
+
+<script>
+  import {
+    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:
+
+<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
+  <ListItem><strong>Small</strong>: less than 672px</ListItem>
+  <ListItem><strong>Medium</strong>: 672 - 1056px</ListItem>
+  <ListItem><strong>Large</strong>: 1056 - 1312px</ListItem>
+  <ListItem><strong>X-Large</strong>: 1312 - 1584px</ListItem>
+  <ListItem><strong>Max</strong>: 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

@@ -0,0 +1,28 @@
+<script>
+  import { Breakpoint } from "carbon-components-svelte";
+
+  let size;
+  let events = [];
+</script>
+
+<Breakpoint bind:size on:match="{(e) => (events = [...events, e.detail])}" />
+
+<p>Resize the width of your browser.</p>
+<h6>Breakpoint size</h6>
+<h1>{size}</h1>
+
+<h6>on:match</h6>
+<pre>
+  {JSON.stringify(events,null, 2)}
+</pre>
+
+<style>
+  p,
+  h1 {
+    margin-bottom: var(--cds-spacing-08);
+  }
+
+  h6 {
+    margin-bottom: var(--cds-spacing-03);
+  }
+</style>