From b4930910bc9e9592250fccd4d90d8c11088725ef Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 21 Apr 2024 12:35:14 -0700
Subject: [PATCH] feat(breakpoint): integrate `Breakpoint` with v11 (#1957)

---
 COMPONENT_INDEX.md                       | 2 +-
 docs/src/COMPONENT_API.json              | 2 +-
 docs/src/pages/components/Breakpoint.svx | 2 +-
 src/Breakpoint/Breakpoint.svelte         | 8 ++++++--
 src/Breakpoint/breakpointObserver.js     | 3 ++-
 src/Breakpoint/breakpoints.js            | 3 ++-
 types/Breakpoint/Breakpoint.svelte.d.ts  | 2 +-
 7 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index abe2152456..41c2730bc3 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -335,7 +335,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
 
 | Prop name | Required | Kind             | Reactive | Type                                         | Default value                                                             | Description                                       |
 | :-------- | :------- | :--------------- | :------- | -------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------- |
-| sizes     | No       | <code>let</code> | Yes      | <code>Record<BreakpointSize, boolean></code> | <code>{ sm: false, md: false, lg: false, xlg: false, max: false, }</code> | Carbon grid sizes as an object                    |
+| sizes     | No       | <code>let</code> | Yes      | <code>Record<BreakpointSize, boolean></code> | <code>{ sm: false, md: false, lg: false, xlg: false, max: false, }</code> | Bind to all Carbon grid breakpoints.              |
 | size      | No       | <code>let</code> | Yes      | <code>BreakpointSize</code>                  | <code>undefined</code>                                                    | Determine the current Carbon grid breakpoint size |
 
 ### Slots
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 71fc09ff1e..015716aaf6 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -358,7 +358,7 @@
         {
           "name": "sizes",
           "kind": "let",
-          "description": "Carbon grid sizes as an object",
+          "description": "Bind to all Carbon grid breakpoints.",
           "type": "Record<BreakpointSize, boolean>",
           "value": "{     sm: false,     md: false,     lg: false,     xlg: false,     max: false,   }",
           "isFunction": false,
diff --git a/docs/src/pages/components/Breakpoint.svx b/docs/src/pages/components/Breakpoint.svx
index 072a5659ae..b07da4d413 100644
--- a/docs/src/pages/components/Breakpoint.svx
+++ b/docs/src/pages/components/Breakpoint.svx
@@ -6,7 +6,7 @@
   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:
+The [Carbon Design System grid implementation](https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints) defines five responsive breakpoints:
 
 <UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)">
   <ListItem><strong>Small</strong>: less than 672px</ListItem>
diff --git a/src/Breakpoint/Breakpoint.svelte b/src/Breakpoint/Breakpoint.svelte
index c040e90371..08dc056876 100644
--- a/src/Breakpoint/Breakpoint.svelte
+++ b/src/Breakpoint/Breakpoint.svelte
@@ -1,4 +1,6 @@
 <script>
+  // @ts-check
+
   /**
    * @typedef {"sm" | "md" | "lg" | "xlg" | "max"} BreakpointSize
    * @typedef {320 | 672 | 1056 | 1312 | 1584} BreakpointValue
@@ -13,7 +15,7 @@
   export let size = undefined;
 
   /**
-   * Carbon grid sizes as an object
+   * Bind to all Carbon grid breakpoints.
    * @type {Record<BreakpointSize, boolean>}
    */
   export let sizes = {
@@ -28,6 +30,7 @@
   import { breakpointObserver } from "./breakpointObserver";
   import { breakpoints } from "./breakpoints";
 
+  /** @type {import("svelte").EventDispatcher<{ change: { size: BreakpointSize; breakpointValue: BreakpointValue; } }>} */
   const dispatch = createEventDispatcher();
   const observer = breakpointObserver();
 
@@ -39,8 +42,9 @@
     xlg: size == "xlg",
     max: size == "max",
   };
-  $: if (size != undefined)
+  $: if (size != undefined) {
     dispatch("change", { size, breakpointValue: breakpoints[size] });
+  }
 </script>
 
 <slot size="{size}" sizes="{sizes}" />
diff --git a/src/Breakpoint/breakpointObserver.js b/src/Breakpoint/breakpointObserver.js
index c87fc4d124..6630b808e2 100644
--- a/src/Breakpoint/breakpointObserver.js
+++ b/src/Breakpoint/breakpointObserver.js
@@ -75,8 +75,9 @@ export function breakpointObserver() {
 }
 
 function checkSizeValid(size) {
-  if (size in breakpoints == false)
+  if (size in breakpoints == false) {
     throw new Error(`"${size}" is not a valid breakpoint size.`);
+  }
 }
 
 export default breakpointObserver;
diff --git a/src/Breakpoint/breakpoints.js b/src/Breakpoint/breakpoints.js
index a65be79191..db4b59a04f 100644
--- a/src/Breakpoint/breakpoints.js
+++ b/src/Breakpoint/breakpoints.js
@@ -1,5 +1,6 @@
 /**
- * Pixel sizes of Carbon grid breakpoints.
+ * Carbon grid breakpoints in px.
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
  * @type {Record<import("./breakpoints").BreakpointSize, BreakpointValue>}
  */
 export const breakpoints = Object.freeze({
diff --git a/types/Breakpoint/Breakpoint.svelte.d.ts b/types/Breakpoint/Breakpoint.svelte.d.ts
index f608070d85..e2c36a6052 100644
--- a/types/Breakpoint/Breakpoint.svelte.d.ts
+++ b/types/Breakpoint/Breakpoint.svelte.d.ts
@@ -12,7 +12,7 @@ export interface BreakpointProps {
   size?: BreakpointSize;
 
   /**
-   * Carbon grid sizes as an object
+   * Bind to all Carbon grid breakpoints.
    * @default { sm: false, md: false, lg: false, xlg: false, max: false, }
    */
   sizes?: Record<BreakpointSize, boolean>;