library: add Breakpoint entry

src/Library/demos/Breakpoints/main.blp

@@ -0,0 +1,61 @@
+using Gtk 4.0;
+using Adw 1;
+
+Gtk.Window {
+  width-request: 360;
+  height-request: 200;
+  default-width: 640;
+  default-height: 480;
+  title: bind page.title;
+
+  Adw.StatusPage page {
+    title: _("Breakpoints");
+    description: _("Resize the window to see the breakpoint effect");
+    child: Box {
+      orientation: vertical;
+      spacing: 12;
+      valign: center;
+
+      Image image {
+        icon-size: large;
+        icon-name: "smile-symbolic";
+      }
+
+      Adw.BreakpointBin breakpoint_bin {
+        width-request: 200;
+        height-request: 50;
+
+        Adw.Breakpoint breakpoint {
+          condition ("max-width: 500sp")
+          setters {
+            breakpoint_bin.child: label_narrow;
+            image.icon-size: normal;
+          }
+        }
+
+        child: label_wide;
+      }
+
+      LinkButton {
+        margin-top: 24;
+        label: "Breakpoint";
+        uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Breakpoint.html";
+      }
+
+      LinkButton {
+        label: "Breakpoint Bin";
+        uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BreakpointBin.html";
+      }
+    };
+  }
+}
+
+Label label_narrow {
+  label: _("Narrow");
+  styles ["title-4"]
+}
+
+Label label_wide {
+  label: _("Wide");
+  styles ["title-1"]
+}

src/Library/demos/Breakpoints/main.js

@@ -0,0 +1,11 @@
+import Gtk from "gi://Gtk";
+
+const breakpoint = workbench.builder.get_object("breakpoint");
+
+breakpoint.connect("apply", () => {
+  console.log("Breakpoint Applied");
+});
+
+breakpoint.connect("unapply", () => {
+  console.log("Breakpoint Unapplied");
+});

src/Library/demos/Breakpoints/main.json

@@ -0,0 +1,6 @@
+{
+  "category": "layout",
+  "description": "Create adaptive UI",
+  "panels": ["ui", "preview"],
+  "autorun": true
+}