From 8e1f52e7d4bdbf530261dd2066bb2bb73223a709 Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Wed, 7 Jul 2021 12:33:56 -0700
Subject: [PATCH] docs(breakpoint): label on:match event [ci skip]

---
 docs/src/pages/components/Breakpoint.svx           | 10 +++++-----
 docs/src/pages/framed/Breakpoint/Breakpoint.svelte |  7 ++++++-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/docs/src/pages/components/Breakpoint.svx b/docs/src/pages/components/Breakpoint.svx
index e3ea9c12..082f57bc 100644
--- a/docs/src/pages/components/Breakpoint.svx
+++ b/docs/src/pages/components/Breakpoint.svx
@@ -9,11 +9,11 @@
 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> (`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>
+  <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.
diff --git a/docs/src/pages/framed/Breakpoint/Breakpoint.svelte b/docs/src/pages/framed/Breakpoint/Breakpoint.svelte
index f1cca7ae..d47affd2 100644
--- a/docs/src/pages/framed/Breakpoint/Breakpoint.svelte
+++ b/docs/src/pages/framed/Breakpoint/Breakpoint.svelte
@@ -8,9 +8,10 @@
 <Breakpoint bind:size on:match="{(e) => (events = [...events, e.detail])}" />
 
 <p>Resize the width of your browser.</p>
-<h6>Current breakpoint size</h6>
+<h6>Breakpoint size</h6>
 <h1>{size}</h1>
 
+<h6>on:match</h6>
 <pre>
   {JSON.stringify(events,null, 2)}
 </pre>
@@ -20,4 +21,8 @@
   h1 {
     margin-bottom: var(--cds-spacing-08);
   }
+
+  h6 {
+    margin-bottom: var(--cds-spacing-03);
+  }
 </style>