@the-portland-company/shell 0.89.0 → 0.90.0

package/dist/native.cjs

@@ -2217,60 +2217,65 @@ var MODE_EYEBROW_LABEL = {
   campaign: "Campaign mode",
   petition: "Petition mode"
 };
-var resolveMaxWidthClass = (maxW) => {
-  if (maxW === "full") return "max-w-none";
-  if (maxW === "container.lg") return "max-w-6xl";
-  if (maxW === "container.md") return "max-w-5xl";
-  return "max-w-7xl";
-};
+var EMAIL_PATTERN = /[^\s@]+@[^\s@]+\.[^\s@]+/;
 function PageHeaderView({
-  renderCrumbLink,
   title,
   mode,
   eyebrow,
   showEyebrow = true,
   subtitle,
-  breadcrumbs = [],
+  breadcrumbs,
   actions = null,
   tabBar = null,
-  maxW = "full",
+  maxW,
   hideSidebar = false
 }) {
-  const maxWClass = resolveMaxWidthClass(maxW);
-  const titleText = typeof title === "string" ? title.trim() : "";
-  const normalizedTitle = titleText.toLowerCase();
-  const breadcrumbsWithoutCurrent = [...breadcrumbs];
-  const last = breadcrumbsWithoutCurrent[breadcrumbsWithoutCurrent.length - 1];
-  if (breadcrumbsWithoutCurrent.length > 1 && normalizedTitle && last && last.label.trim().toLowerCase() === normalizedTitle) {
-    breadcrumbsWithoutCurrent.pop();
+  if (breadcrumbs !== void 0) {
+    warnDeprecated(
+      "PageHeader.breadcrumbs",
+      '<PageHeader breadcrumbs> is deprecated and renders nothing: the breadcrumb trail is retired (Reference/UI-Platform \u2192 "Page header"). Remove the prop.'
+    );
+  }
+  if (maxW !== void 0) {
+    warnDeprecated(
+      "PageHeader.maxW",
+      "<PageHeader maxW> is deprecated and ignored: the header spans its container. Use <FormColumn> (960px) or the fluid frame for page width."
+    );
+  }
+  if (typeof title === "string" && EMAIL_PATTERN.test(title) || typeof subtitle === "string" && EMAIL_PATTERN.test(subtitle)) {
+    warnDeprecated(
+      "PageHeader.email",
+      `<PageHeader> title/subtitle contains an email address. The user's email never appears in the page header (Reference/UI-Platform \u2192 "Page header"); identity lives in the left bar footer.`
+    );
   }
   const eyebrowText = showEyebrow ? eyebrow ?? (mode ? MODE_EYEBROW_LABEL[mode] : void 0) : void 0;
-  if (!title && !eyebrowText && breadcrumbsWithoutCurrent.length === 0 && !actions && !tabBar) {
+  if (!title && !eyebrowText && !actions && !tabBar) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      style: { backgroundColor: "var(--app-tab-header-bg, #888888)" },
-      className: clsx5__default.default("text-slate-100", tabBar ? "pt-3 pb-0" : "py-3 border-b border-gray-200", {
+      "data-shell-page-header": "",
+      className: clsx5__default.default("pt-[22px] text-[color:var(--color-text,#2F3136)]", tabBar ? "pb-0" : "pb-4", {
         "md:ml-60": !hideSidebar
       }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx5__default.default("w-full px-4", maxWClass), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-nowrap items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-4 md:px-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-nowrap items-start justify-between gap-4", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
             eyebrowText ? /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
                 className: "truncate text-[11px] font-bold uppercase leading-[1.2] tracking-[0.09em]",
-                style: { color: "var(--mode-accent, var(--color-accent, #E63946))" },
+                style: { color: "var(--color-accent-fg, var(--mode-accent, var(--color-accent, #E63946)))" },
                 children: eyebrowText
               }
             ) : null,
             title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
+              "h1",
               {
-                className: "truncate font-bold text-white",
+                className: "m-0 truncate font-bold",
                 style: {
+                  color: "var(--color-text, #2F3136)",
                   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)"
@@ -2278,25 +2283,7 @@ function PageHeaderView({
                 children: title
               }
             ) }) : null,
-            subtitle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 truncate text-[15px] text-[color:var(--color-g4,#929599)]", children: subtitle }) : null,
-            breadcrumbsWithoutCurrent.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-              "nav",
-              {
-                "aria-label": "Breadcrumb",
-                className: clsx5__default.default("min-w-0 text-slate-100", title ? "mt-1" : ""),
-                children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex flex-nowrap items-center gap-2 overflow-hidden text-sm text-gray-600", children: breadcrumbsWithoutCurrent.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-                  "li",
-                  {
-                    className: "flex min-w-0 flex-shrink-0 items-center gap-2",
-                    children: [
-                      index > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: ">" }) : null,
-                      item.href ? renderCrumbLink(item.href, item.label, "truncate text-slate-100 hover:underline") : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-slate-100", children: item.label })
-                    ]
-                  },
-                  `${item.label}-${index}`
-                )) })
-              }
-            ) : null
+            subtitle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 truncate text-[15px] text-[color:var(--color-g4,#58657A)]", children: subtitle }) : null
           ] }),
           actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: actions }) : null
         ] }) }),
@@ -2306,13 +2293,7 @@ function PageHeaderView({
   );
 }
 function PageHeader(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    PageHeaderView,
-    {
-      ...props,
-      renderCrumbLink: (href, label, className) => /* @__PURE__ */ jsxRuntime.jsx("a", { href, className, children: label })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(PageHeaderView, { ...props });
 }
 function BreadcrumbBarView({
   renderCrumbLink,