Wrap the page header and add share button

site/lib/_sass/base/_base.scss

@@ -30,27 +30,12 @@ h1, h2, h3, h4, h5, h6 {
 
 h1, .h1 {
   font-family: var(--site-ui-fontFamily);
-  font-size: 3rem;
+  font-size: 2.75rem;
+  font-weight: 500;
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.material-symbols {
-  font-family: var(--site-icon-fontFamily);
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}
-
 h2, .h2 {
   font-size: 1.5rem;
 }
@@ -71,6 +56,22 @@ h6, .h6 {
   font-size: 0.9375rem;
 }
 
+.material-symbols {
+  font-family: var(--site-icon-fontFamily);
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
 dd {
   margin-left: 1rem;
 }

site/lib/_sass/components/_breadcrumbs.scss

@@ -1,12 +1,11 @@
 nav.breadcrumbs {
   align-items: center;
-  margin-block-start: 0.25rem;
-  margin-block-end: 1rem;
 
   ol.breadcrumb-list {
     margin: 0;
-    border-radius: 0.375rem;
-    padding: 0.375rem 0;
+    padding: 0;
+    border-radius: var(--site-radius);
+    font-size: 0.925rem;
 
     align-items: center;
     list-style: none;
@@ -29,7 +28,7 @@ nav.breadcrumbs {
       }
 
       &.active a {
-        color: var(--site-base-fgColor-alt);
+        color: var(--site-base-fgColor-lighter);
         cursor: default;
         text-decoration: none;
       }
@@ -41,6 +40,8 @@ nav.breadcrumbs {
 
     .material-symbols {
       user-select: none;
+      font-size: 1.25rem;
+      color: var(--site-base-fgColor-lighter);
     }
   }
 }

site/lib/_sass/components/_content.scss

@@ -45,8 +45,42 @@ article {
   }
 
   #site-content-title {
-    margin-bottom: 1rem;
+    position: relative;
+    font-family: var(--site-ui-fontFamily);
+    margin-block-end: 1.5rem;
     scroll-margin-top: calc(var(--site-header-height) + var(--site-subheader-height) + 1.25rem);
+
+    &.wrap {
+      display: flex;
+      flex-direction: column;
+      gap: 0.35rem;
+
+      background-color: var(--site-raised-bgColor);
+      padding: 1rem;
+      border-radius: var(--site-radius);
+    }
+
+    h1 {
+      text-wrap: pretty;
+    }
+
+    .page-description {
+      margin-block: 0;
+    }
+
+    #page-header-options {
+      position: absolute;
+      top: 0.75rem;
+      right: 0.75rem;
+
+      > button {
+        color: var(--site-base-fgColor-alt);
+      }
+
+      .dropdown-content {
+        right: -0.5rem;
+      }
+    }
   }
 
   h1,

site/lib/_sass/components/_dropdown.scss

@@ -4,12 +4,12 @@
   .dropdown-content {
     display: none;
     position: absolute;
-    background-color: var(--site-chrome-bgColor);
-    color: var(--site-chrome-fgColor);
+    background-color: var(--site-raised-bgColor);
     box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.2);
     border-radius: calc(var(--site-radius) * 1.25);
     width: max-content;
-    border: var(--site-chrome-borderColor) 1px solid;
+    border: rgba(0, 0, 0, 0.15) 1px solid;
+    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
     z-index: var(--site-z-dropdown);
 
     .dropdown-divider {
@@ -36,6 +36,7 @@
           a, button {
             display: flex;
             align-items: center;
+            justify-content: flex-start;
             flex-direction: row;
             width: 100%;
             gap: 0.4rem;

site/lib/_sass/components/_site-switcher.scss

@@ -11,6 +11,10 @@
 
   .dropdown-content {
     right: -0.5rem;
+    background-color: var(--site-chrome-bgColor);
+    color: var(--site-chrome-fgColor);
+    border: var(--site-chrome-borderColor) 1px solid;
+    box-shadow: none;
   }
 }
 

site/lib/_sass/components/_theming.scss

@@ -3,6 +3,10 @@
 
   > .dropdown-content {
     right: -0.5rem;
+    background-color: var(--site-chrome-bgColor);
+    color: var(--site-chrome-fgColor);
+    border: var(--site-chrome-borderColor) 1px solid;
+    box-shadow: none;
 
     .material-symbols {
       font-size: 20px;

site/lib/src/components/common/client/page_header_options.dart

@@ -0,0 +1,136 @@
+// Copyright (c) 2025, the Dart project authors. Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+import 'package:universal_web/js_interop.dart';
+import 'package:universal_web/web.dart' as web;
+
+import '../button.dart';
+import '../dropdown.dart';
+
+@client
+final class PageHeaderOptions extends StatefulComponent {
+  const PageHeaderOptions({
+    required this.title,
+    this.sourceUrl,
+    this.issueUrl,
+    super.key,
+  });
+
+  final String title;
+  final String? sourceUrl;
+  final String? issueUrl;
+
+  @override
+  State<PageHeaderOptions> createState() => _PageHeaderOptionsState();
+}
+
+final class _PageHeaderOptionsState extends State<PageHeaderOptions> {
+  bool _isShareSupported = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _checkShareSupport();
+  }
+
+  void _checkShareSupport() {
+    if (kIsWeb) {
+      try {
+        // Check if the share API is available.
+        _isShareSupported = web.window.navigator.canShare(_shareData);
+      } catch (_) {
+        _isShareSupported = false;
+      }
+      setState(() {});
+    }
+  }
+
+  String get _currentBaseUrl =>
+      web.window.location.origin + web.window.location.pathname;
+
+  web.ShareData get _shareData => web.ShareData(
+    url: _currentBaseUrl,
+    title: component.title,
+  );
+
+  @override
+  Component build(BuildContext _) => Dropdown(
+    id: 'page-header-options',
+    children: [
+      const DropdownToggle(
+        Button(icon: 'more_vert', title: 'View page options.'),
+      ),
+      DropdownContent(
+        nav(
+          classes: 'dropdown-menu',
+          attributes: {
+            'role': 'menu',
+          },
+          [
+            ul(
+              [
+                li(
+                  [
+                    if (_isShareSupported)
+                      Button(
+                        icon: 'share',
+                        content: 'Share page',
+                        onClick: () {
+                          web.window.navigator
+                              .share(_shareData)
+                              .toDart
+                              .ignore();
+                        },
+                      )
+                    else
+                      Button(
+                        icon: 'copy',
+                        content: 'Copy link',
+                        onClick: () {
+                          web.window.navigator.clipboard
+                              .writeText(_currentBaseUrl)
+                              .toDart
+                              .ignore();
+                        },
+                      ),
+                  ],
+                ),
+                if (component.sourceUrl case final sourceUrl?)
+                  li(
+                    [
+                      Button(
+                        icon: 'docs',
+                        content: 'View source',
+                        href: sourceUrl,
+                        attributes: const {
+                          'target': '_blank',
+                          'rel': 'noopener',
+                        },
+                      ),
+                    ],
+                  ),
+                if (component.issueUrl case final issueUrl?)
+                  li(
+                    [
+                      Button(
+                        icon: 'bug_report',
+                        content: 'Report issue',
+                        href: issueUrl,
+                        attributes: const {
+                          'target': '_blank',
+                          'rel': 'noopener',
+                        },
+                      ),
+                    ],
+                  ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    ],
+  );
+}

site/lib/src/components/common/page_header.dart

@@ -0,0 +1,60 @@
+// Copyright (c) 2025, the Dart project authors. Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+import 'package:jaspr_content/jaspr_content.dart';
+
+import '../../util.dart';
+import '../../utils/page_source_info.dart';
+import 'breadcrumbs.dart';
+import 'client/page_header_options.dart';
+
+class PageHeader extends StatelessComponent {
+  const PageHeader({
+    super.key,
+    required this.title,
+    this.description,
+    this.wrap = true,
+    this.showBreadcrumbs = true,
+    this.splitTitleByUnderscores = false,
+  });
+
+  final String title;
+  final String? description;
+  final bool wrap;
+  final bool showBreadcrumbs;
+  final bool splitTitleByUnderscores;
+
+  @override
+  Component build(BuildContext context) {
+    final sourceInfo = context.page.sourceInfo;
+
+    return header(
+      id: 'site-content-title',
+      classes: [if (wrap) 'wrap'].toClasses,
+      [
+        if (showBreadcrumbs) const PageBreadcrumbs(),
+        h1(id: 'document-title', [
+          if (splitTitleByUnderscores)
+            ...splitByUnderscore(title)
+          else
+            .text(title),
+        ]),
+        if (description case final description? when description.isNotEmpty)
+          p(
+            classes: ['page-description'].toClasses,
+            [
+              .text(description),
+            ],
+          ),
+        PageHeaderOptions(
+          title: title,
+          sourceUrl: sourceInfo.sourceUrl,
+          issueUrl: sourceInfo.issueUrl,
+        ),
+      ],
+    );
+  }
+}

site/lib/src/components/layout/site_switcher.dart

@@ -82,7 +82,6 @@ class _SiteWordMarkListEntry extends StatelessComponent {
   @override
   Component build(BuildContext _) {
     return li(
-      attributes: {'role': 'presentation'},
       [
         a(
           href: href,