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]

types/Breakpoint/Breakpoint.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
+
+export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
+
+export interface BreakpointProps {
+  /**
+   * Determine the current Carbon grid breakpoint size
+   */
+  size?: BreakpointSize;
+
+  /**
+   * Carbon grid sizes as an object
+   * @default { sm: false, md: false, lg: false, xlg: false, max: false, }
+   */
+  sizes?: Record<BreakpointSize, boolean>;
+
+  /**
+   * Reference the Carbon grid breakpoints
+   * @constant
+   * @default { sm: 320, md: 672, lg: 1056, xlg: 1312, max: 1584, }
+   */
+  breakpoints?: { sm: 320; md: 672; lg: 1056; xlg: 1312; max: 1584 };
+}
+
+export default class Breakpoint extends SvelteComponentTyped<
+  BreakpointProps,
+  {
+    match: CustomEvent<{
+      size: BreakpointSize;
+      breakpointValue: BreakpointValue;
+    }>;
+  },
+  { default: { size: BreakpointSize; sizes: Record<BreakpointSize, boolean> } }
+> {}

types/index.d.ts

@@ -5,6 +5,7 @@ export { default as AspectRatio } from "./AspectRatio/AspectRatio";
 export { default as Breadcrumb } from "./Breadcrumb/Breadcrumb";
 export { default as BreadcrumbItem } from "./Breadcrumb/BreadcrumbItem";
 export { default as BreadcrumbSkeleton } from "./Breadcrumb/BreadcrumbSkeleton";
+export { default as Breakpoint } from "./Breakpoint/Breakpoint";
 export { default as Button } from "./Button/Button";
 export { default as ButtonSkeleton } from "./Button/ButtonSkeleton";
 export { default as ButtonSet } from "./Button/ButtonSet";