feat(breakpoint): integrate Breakpoint with v11 (#1957)

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}" />

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;

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({