@the-portland-company/shell 0.75.0 → 0.75.2

package/dist/index.d.cts

@@ -22,15 +22,32 @@ type BreadcrumbItem$1 = {
     label: string;
     href?: string;
 };
+/** The three Modes a page header's eyebrow can announce (Reference/UI-Platform
+ * → "Per-mode branding"). */
+type PageHeaderMode = 'relationship' | 'campaign' | 'petition';
 type PageHeaderProps = {
     title?: ReactNode;
+    /**
+     * The operating Mode this page belongs to. When set, the 11px uppercase
+     * mode eyebrow ("Relationship mode" / "Campaign mode" / "Petition mode")
+     * renders above the title by DEFAULT — Reference/UI-Platform → "Page
+     * header": "Left: an 11px uppercase mode eyebrow ... in the mode color
+     * (`modes.<mode>.primary`)". Pass `showEyebrow={false}` to suppress it.
+     */
+    mode?: PageHeaderMode;
+    /** Overrides the eyebrow text the `mode` default would produce. */
+    eyebrow?: string;
+    /** Set false to suppress the eyebrow even when `mode` is passed. Default true. */
+    showEyebrow?: boolean;
+    /** Optional one-line subtitle, 15px G4, directly under the title. */
+    subtitle?: ReactNode;
     breadcrumbs?: BreadcrumbItem$1[];
     actions?: ReactNode;
     tabBar?: ReactNode;
     maxW?: string;
     hideSidebar?: boolean;
 };
-declare function PageHeader({ title, breadcrumbs, actions, tabBar, maxW, hideSidebar, }: PageHeaderProps): react_jsx_runtime.JSX.Element | null;
+declare function PageHeader({ title, mode, eyebrow, showEyebrow, subtitle, breadcrumbs, actions, tabBar, maxW, hideSidebar, }: PageHeaderProps): react_jsx_runtime.JSX.Element | null;
 
 type PageContainerProps = {
     children: ReactNode;

package/dist/index.d.ts

@@ -22,15 +22,32 @@ type BreadcrumbItem$1 = {
     label: string;
     href?: string;
 };
+/** The three Modes a page header's eyebrow can announce (Reference/UI-Platform
+ * → "Per-mode branding"). */
+type PageHeaderMode = 'relationship' | 'campaign' | 'petition';
 type PageHeaderProps = {
     title?: ReactNode;
+    /**
+     * The operating Mode this page belongs to. When set, the 11px uppercase
+     * mode eyebrow ("Relationship mode" / "Campaign mode" / "Petition mode")
+     * renders above the title by DEFAULT — Reference/UI-Platform → "Page
+     * header": "Left: an 11px uppercase mode eyebrow ... in the mode color
+     * (`modes.<mode>.primary`)". Pass `showEyebrow={false}` to suppress it.
+     */
+    mode?: PageHeaderMode;
+    /** Overrides the eyebrow text the `mode` default would produce. */
+    eyebrow?: string;
+    /** Set false to suppress the eyebrow even when `mode` is passed. Default true. */
+    showEyebrow?: boolean;
+    /** Optional one-line subtitle, 15px G4, directly under the title. */
+    subtitle?: ReactNode;
     breadcrumbs?: BreadcrumbItem$1[];
     actions?: ReactNode;
     tabBar?: ReactNode;
     maxW?: string;
     hideSidebar?: boolean;
 };
-declare function PageHeader({ title, breadcrumbs, actions, tabBar, maxW, hideSidebar, }: PageHeaderProps): react_jsx_runtime.JSX.Element | null;
+declare function PageHeader({ title, mode, eyebrow, showEyebrow, subtitle, breadcrumbs, actions, tabBar, maxW, hideSidebar, }: PageHeaderProps): react_jsx_runtime.JSX.Element | null;
 
 type PageContainerProps = {
     children: ReactNode;

package/dist/index.js

@@ -797,7 +797,7 @@ var SYSTEM_MONO = 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "
 var fonts = {
   heading: `var(--font-family, ${SYSTEM_SANS})`,
   body: `var(--font-family, ${SYSTEM_SANS})`,
-  mono: `var(--type-mono-family, ${SYSTEM_MONO})`
+  mono: `var(--font-mono, ${SYSTEM_MONO})`
 };
 var politogyTheme = extendTheme({
   config,
@@ -843,6 +843,11 @@ function Card({
     }
   );
 }
+var MODE_EYEBROW_LABEL = {
+  relationship: "Relationship mode",
+  campaign: "Campaign mode",
+  petition: "Petition mode"
+};
 var resolveMaxWidthClass = (maxW) => {
   if (maxW === "full") return "max-w-none";
   if (maxW === "container.lg") return "max-w-6xl";
@@ -851,6 +856,10 @@ var resolveMaxWidthClass = (maxW) => {
 };
 function PageHeader({
   title,
+  mode,
+  eyebrow,
+  showEyebrow = true,
+  subtitle,
   breadcrumbs = [],
   actions = null,
   tabBar = null,
@@ -865,7 +874,8 @@ function PageHeader({
   if (breadcrumbsWithoutCurrent.length > 1 && normalizedTitle && last && last.label.trim().toLowerCase() === normalizedTitle) {
     breadcrumbsWithoutCurrent.pop();
   }
-  if (!title && breadcrumbsWithoutCurrent.length === 0 && !actions && !tabBar) {
+  const eyebrowText = showEyebrow ? eyebrow ?? (mode ? MODE_EYEBROW_LABEL[mode] : void 0) : void 0;
+  if (!title && !eyebrowText && breadcrumbsWithoutCurrent.length === 0 && !actions && !tabBar) {
     return null;
   }
   return /* @__PURE__ */ jsxs(
@@ -878,7 +888,27 @@ function PageHeader({
       children: [
         /* @__PURE__ */ jsx("div", { className: clsx("w-full px-4", maxWClass), children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-nowrap items-start justify-between gap-4", children: [
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            title ? /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx("div", { className: "truncate text-lg font-semibold text-white", children: title }) }) : null,
+            eyebrowText ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "truncate text-[11px] font-bold uppercase leading-[1.2] tracking-[0.09em]",
+                style: { color: "var(--mode-accent, var(--color-accent, #E63946))" },
+                children: eyebrowText
+              }
+            ) : null,
+            title ? /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "truncate font-bold text-white",
+                style: {
+                  fontFamily: "var(--font-family, ui-sans-serif, system-ui, sans-serif)",
+                  fontSize: "var(--type-h2-size, 1.875rem)",
+                  lineHeight: "var(--type-h2-line-height, 1.25)"
+                },
+                children: title
+              }
+            ) }) : null,
+            subtitle ? /* @__PURE__ */ jsx("div", { className: "mt-1 truncate text-[15px] text-[color:var(--color-g4,#929599)]", children: subtitle }) : null,
             breadcrumbsWithoutCurrent.length > 0 ? /* @__PURE__ */ jsx(
               "nav",
               {