@homebound/beam 3.56.1 → 3.58.0

package/dist/index.js

@@ -3870,6 +3870,10 @@ var CssBuilder = class _CssBuilder {
   get transitionTop() {
     return this.add("transition", "top 200ms cubic-bezier(0.4, 0, 0.2, 1)");
   }
+  /** Sets `transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
+  get transitionAll() {
+    return this.add("transition", "all 200ms cubic-bezier(0.4, 0, 0.2, 1)");
+  }
   // buttonBase
   /** Sets `fontWeight: 600; fontSize: "14px"; lineHeight: "20px"; outline: 0; borderRadius: "8px"; display: "inline-flex"; alignItems: "center"; whiteSpace: "nowrap"; transition: "background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), left 200ms cubic-bezier(0.4, 0, 0.2, 1), right 200ms cubic-bezier(0.4, 0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
   get buttonBase() {
@@ -5995,6 +5999,7 @@ var beamLayoutViewportWidthVar = "--beam-layout-viewport-width";
 var beamLayoutViewportHeightVar = "--beam-layout-viewport-height";
 var beamSideNavLayoutWidthVar = "--beam-side-nav-layout-width";
 var beamTableActionsHeightVar = "--beam-table-actions-height";
+var beamWorkflowLayoutFooterHeightVar = "--beam-workflow-layout-footer-height";
 function documentScrollChromeLeft() {
   return `var(${beamSideNavLayoutWidthVar}, 0px)`;
 }
@@ -6010,6 +6015,9 @@ function stickyNavAndHeaderOffset(basePx = 0) {
 function stickyTableHeaderOffset(basePx = 0) {
   return `calc(${basePx}px + var(${beamEnvironmentBannerLayoutHeightVar}, 0px) + var(${beamNavbarLayoutHeightVar}, 0px) + var(${beamPageHeaderLayoutHeightVar}, 0px) + var(${beamTableActionsHeightVar}, 0px))`;
 }
+function getFloatingBottomOffset(basePx = 0) {
+  return `calc(${basePx}px + var(${beamWorkflowLayoutFooterHeightVar}, 0px))`;
+}
 
 // src/utils/zIndices.ts
 var zIndices = {
@@ -6026,6 +6034,8 @@ var zIndices = {
   superDrawerScrim: 55,
   modalUnderlay: 60,
   pageStickyHeader: 70,
+  // Sticky mobile action footer (WorkflowLayout) — same tier as pageStickyHeader; header and footer never overlap on screen.
+  pageStickyFooter: 70,
   dragHandle: 80,
   // Side-nav layer. Mobile rail overlays page content when expanded; sits below
   // snackbar so toasts still land on top.
@@ -8956,7 +8966,7 @@ function RowImpl(props) {
           "--width": maybeCssVar13(__maybeInc6(`calc(${columnSizes.slice(columnIndex, columnIndex + currentColspan).join(" + ")}${applyFirstContentColumnStyles && levelIndent ? ` - ${levelIndent}px` : ""})`))
         }]
       },
-      // Gutter columns are budgeted at 12px; strip cell padding so flex min-content does not exceed that width.
+      // Gutter columns are budgeted at pageContentGutterPx; strip cell padding so flex min-content does not exceed that width.
       ...column2.isLayoutGutter && {
         paddingLeft: "pl0",
         paddingRight: "pr0",
@@ -15420,6 +15430,22 @@ function SelectToggle({ id, disabled }) {
   );
 }
 
+// src/layouts/layoutSpacing.ts
+var pageContentGutterPx = 12;
+var pageContentPaddingX = {
+  paddingLeft: "pl3",
+  paddingRight: "pr3"
+};
+function headerContentPaddingX(compact = false) {
+  return compact ? {
+    paddingLeft: "pl1",
+    paddingRight: "pr1"
+  } : {
+    paddingLeft: "pl1 mdandup_pl5",
+    paddingRight: "pr1 mdandup_pr5"
+  };
+}
+
 // src/components/Table/utils/columns.tsx
 import { jsx as jsx90 } from "react/jsx-runtime";
 function column(columnDef) {
@@ -15526,7 +15552,6 @@ function pinColumn(columnDef) {
     });
   });
 }
-var columnGutterPx = 12;
 var layoutGutterLeftColumnId = "beamLayoutGutterLeft";
 var layoutGutterRightColumnId = "beamLayoutGutterRight";
 function isContentColumn(column2) {
@@ -15538,7 +15563,7 @@ function layoutGutterColumn(side) {
     ...nonKindDefaults(),
     id,
     clientSideSort: false,
-    w: `${columnGutterPx}px`,
+    w: `${pageContentGutterPx}px`,
     wrapAction: false,
     isLayoutGutter: true,
     canHide: false,
@@ -16316,6 +16341,9 @@ import { createContext as createContext6, useCallback as useCallback20, useConte
 import { useCallback as useCallback19, useEffect as useEffect19, useState as useState30 } from "react";
 import { trussProps as trussProps55, maybeCssVar as maybeCssVar30 } from "@homebound/truss/runtime";
 import { jsx as jsx91 } from "react/jsx-runtime";
+var __maybeInc10 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
+};
 function DocumentScrollToTopButton({
   viewportHeight
 }) {
@@ -16344,7 +16372,7 @@ function DocumentScrollToTopButton({
     ...{
       position: "fixed",
       bottom: ["bottom_var", {
-        "--bottom": `${scrollToTopOffsetPx}px`
+        "--bottom": maybeCssVar30(__maybeInc10(getFloatingBottomOffset(scrollToTopOffsetPx)))
       }],
       right: ["right_var", {
         "--right": `${scrollToTopOffsetPx}px`
@@ -16432,7 +16460,7 @@ import { useMemo as useMemo27 } from "react";
 import { Link as Link4 } from "react-router-dom";
 import { trussProps as trussProps56, mergeProps as mergeProps20, maybeCssVar as maybeCssVar31 } from "@homebound/truss/runtime";
 import { jsx as jsx93, jsxs as jsxs50 } from "react/jsx-runtime";
-var __maybeInc10 = (inc) => {
+var __maybeInc11 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function TableCard(props) {
@@ -16563,7 +16591,7 @@ function TableCardView(props) {
             borderRadius: "br4",
             backgroundColor: "bgBlue500",
             width: ["w_var", {
-              "--width": maybeCssVar31(__maybeInc10(`${progressValue}%`))
+              "--width": maybeCssVar31(__maybeInc11(`${progressValue}%`))
             }]
           }) }) }),
           /* @__PURE__ */ jsxs50("span", { ...tid.progressValue, children: [
@@ -16602,7 +16630,7 @@ function GridTableEmptyState(props) {
 import { trussProps as trussProps57, mergeProps as mergeProps21, maybeCssVar as maybeCssVar32 } from "@homebound/truss/runtime";
 import { jsx as jsx95, jsxs as jsxs52 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
-var __maybeInc11 = (inc) => {
+var __maybeInc12 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 var runningInJest = false;
@@ -16932,7 +16960,7 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, pinned
         position: "sticky",
         transition: "transitionTop",
         top: ["top_var", {
-          "--top": maybeCssVar32(__maybeInc11(stickyTableHeaderOffset(stickyOffset)))
+          "--top": maybeCssVar32(__maybeInc12(stickyTableHeaderOffset(stickyOffset)))
         }],
         zIndex: ["z_var", {
           "--zIndex": maybeCssVar32(zIndices.tableStickyHeader)
@@ -16976,7 +17004,7 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, pinn
         position: "sticky",
         transition: "transitionTop",
         top: ["top_var", {
-          "--top": maybeCssVar32(__maybeInc11(stickyTableHeaderOffset(stickyOffset)))
+          "--top": maybeCssVar32(__maybeInc12(stickyTableHeaderOffset(stickyOffset)))
         }],
         zIndex: ["z_var", {
           "--zIndex": maybeCssVar32(zIndices.tableStickyHeader)
@@ -17320,7 +17348,7 @@ import { useCallback as useCallback21, useEffect as useEffect21, useMemo as useM
 import { useFocusRing as useFocusRing11 } from "react-aria";
 import { trussProps as trussProps60, maybeCssVar as maybeCssVar33 } from "@homebound/truss/runtime";
 import { jsx as jsx98, jsxs as jsxs54 } from "react/jsx-runtime";
-var __maybeInc12 = (inc) => {
+var __maybeInc13 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function Accordion(props) {
@@ -17467,7 +17495,7 @@ function Accordion(props) {
     /* @__PURE__ */ jsx98("div", { ...tid.details, id, "aria-hidden": !expanded, ...trussProps60({
       overflow: "oh",
       height: ["h_var", {
-        "--height": maybeCssVar33(__maybeInc12(contentHeight))
+        "--height": maybeCssVar33(__maybeInc13(contentHeight))
       }],
       transition: "transition_height_250ms_ease_in_out"
     }), children: expanded && /* @__PURE__ */ jsx98("div", { ...trussProps60({
@@ -18979,7 +19007,7 @@ function BoundTreeSelectField(props) {
 import { Children, cloneElement } from "react";
 import { trussProps as trussProps66, maybeCssVar as maybeCssVar37 } from "@homebound/truss/runtime";
 import { jsx as jsx127 } from "react/jsx-runtime";
-var __maybeInc13 = (inc) => {
+var __maybeInc14 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function FormLines(props) {
@@ -19017,13 +19045,13 @@ function FormLines(props) {
     display: "df",
     flexDirection: "fdc",
     gap: ["gap_var", {
-      "--gap": maybeCssVar37(__maybeInc13(gap))
+      "--gap": maybeCssVar37(__maybeInc14(gap))
     }],
     paddingBottom: ["pb_var", {
-      "--paddingBottom": maybeCssVar37(__maybeInc13(gap))
+      "--paddingBottom": maybeCssVar37(__maybeInc14(gap))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar37(__maybeInc13(sizes[width2]))
+      "--width": maybeCssVar37(__maybeInc14(sizes[width2]))
     }]
   }), children: Children.map(children, (child) => {
     if (child && typeof child === "object" && "type" in child && child.type.isFormHeading) {
@@ -19903,7 +19931,7 @@ function useActiveSection(sectionsWithRefs) {
 // src/components/Layout/FullBleed.tsx
 import { mergeProps as mergeProps23, maybeCssVar as maybeCssVar41 } from "@homebound/truss/runtime";
 import { cloneElement as cloneElement3 } from "react";
-var __maybeInc14 = (inc) => {
+var __maybeInc15 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function FullBleed({
@@ -19934,17 +19962,17 @@ function FullBleed({
         // inverts that padding with negative margins before re-applying it to the child.
         {
           marginLeft: ["ml_var", {
-            "--marginLeft": maybeCssVar41(__maybeInc14(invertSpacing(paddingLeft)))
+            "--marginLeft": maybeCssVar41(__maybeInc15(invertSpacing(paddingLeft)))
           }],
           marginRight: ["mr_var", {
-            "--marginRight": maybeCssVar41(__maybeInc14(invertSpacing(paddingRight)))
+            "--marginRight": maybeCssVar41(__maybeInc15(invertSpacing(paddingRight)))
           }],
           ...!omitPadding ? {
             paddingLeft: ["pl_var", {
-              "--paddingLeft": maybeCssVar41(__maybeInc14(paddingLeft))
+              "--paddingLeft": maybeCssVar41(__maybeInc15(paddingLeft))
             }],
             paddingRight: ["pr_var", {
-              "--paddingRight": maybeCssVar41(__maybeInc14(paddingRight))
+              "--paddingRight": maybeCssVar41(__maybeInc15(paddingRight))
             }]
           } : {}
         }
@@ -20828,12 +20856,7 @@ function FilterPanelOpen({
     ...{
       flexWrap: "mdandup_fww"
     },
-    ...{
-      ...inDocumentScrollLayout ? {
-        paddingLeft: "pl3",
-        paddingRight: "pr3"
-      } : {}
-    }
+    ...inDocumentScrollLayout ? pageContentPaddingX : void 0
   }), children: [
     groupBy && /* @__PURE__ */ jsx156(GroupByField, { ...groupBy }),
     filterControls,
@@ -20966,14 +20989,13 @@ function GridTableLayoutActionsComponent(props) {
     } : {}
   }), children: [
     /* @__PURE__ */ jsxs75("div", { ...trussProps78({
-      display: "df",
-      gap: "gap1",
-      justifyContent: "jcsb",
-      paddingTop: "pt3",
-      ...inDocumentScrollLayout ? {
-        paddingLeft: "pl3",
-        paddingRight: "pr3"
-      } : {}
+      ...{
+        display: "df",
+        gap: "gap1",
+        justifyContent: "jcsb",
+        paddingTop: "pt3"
+      },
+      ...inDocumentScrollLayout ? pageContentPaddingX : void 0
     }), children: [
       /* @__PURE__ */ jsxs75("div", { className: "df gap_12px aic", children: [
         !sm && hasSearch && /* @__PURE__ */ jsx157("div", { className: "w_244px", children: searchTextField }),
@@ -20993,7 +21015,7 @@ function GridTableLayoutActionsComponent(props) {
         } })
       ] })
     ] }),
-    sm && showSearch && /* @__PURE__ */ jsx157("div", { className: "pl3 pr3", children: searchTextField }),
+    sm && showSearch && /* @__PURE__ */ jsx157("div", { ...trussProps78(pageContentPaddingX), children: searchTextField }),
     hasFilterControls && !showInlineControl && /* @__PURE__ */ jsx157(FilterPanel, { isOpen: showFilters, groupBy, filterImpls, filter, setFilter, onClear: clearFilters })
   ] });
 }
@@ -21114,7 +21136,7 @@ function parseStoredTableView(raw) {
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
 import { trussProps as trussProps80, maybeCssVar as maybeCssVar44 } from "@homebound/truss/runtime";
 import { Fragment as Fragment36, jsx as jsx160, jsxs as jsxs77 } from "react/jsx-runtime";
-var __maybeInc15 = (inc) => {
+var __maybeInc16 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function GridTableLayoutComponent(props) {
@@ -21173,13 +21195,13 @@ function GridTableLayoutComponent(props) {
         transition: "transitionTop",
         position: "sticky",
         top: ["top_var", {
-          "--top": maybeCssVar44(__maybeInc15(stickyNavAndHeaderOffset()))
+          "--top": maybeCssVar44(__maybeInc16(stickyNavAndHeaderOffset()))
         }],
         left: ["left_var", {
-          "--left": maybeCssVar44(__maybeInc15(documentScrollChromeLeft()))
+          "--left": maybeCssVar44(__maybeInc16(documentScrollChromeLeft()))
         }],
         width: ["w_var", {
-          "--width": maybeCssVar44(__maybeInc15(documentScrollChromeWidth()))
+          "--width": maybeCssVar44(__maybeInc16(documentScrollChromeWidth()))
         }],
         zIndex: ["z_var", {
           "--zIndex": maybeCssVar44(zIndices.tableActions)
@@ -21352,7 +21374,7 @@ import { AnimatePresence as AnimatePresence3, motion as motion3 } from "framer-m
 import { useEffect as useEffect29 } from "react";
 import { trussProps as trussProps81, maybeCssVar as maybeCssVar45 } from "@homebound/truss/runtime";
 import { Fragment as Fragment37, jsx as jsx163, jsxs as jsxs78 } from "react/jsx-runtime";
-var __maybeInc16 = (inc) => {
+var __maybeInc17 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function RightPaneLayout(props) {
@@ -21373,7 +21395,7 @@ function RightPaneLayout(props) {
     /* @__PURE__ */ jsx163("div", { ...trussProps81({
       ...{
         width: ["w_var", {
-          "--width": maybeCssVar45(__maybeInc16(`calc(100% - ${paneWidth + 24}px)`))
+          "--width": maybeCssVar45(__maybeInc17(`calc(100% - ${paneWidth + 24}px)`))
         }],
         transition: "transition_width_2s_linear",
         height: "h100",
@@ -21389,7 +21411,7 @@ function RightPaneLayout(props) {
       ...{
         ...!!defaultPaneContent ? {
           width: ["w_var", {
-            "--width": maybeCssVar45(__maybeInc16(`calc(100% - ${paneWidth + 24}px)`))
+            "--width": maybeCssVar45(__maybeInc17(`calc(100% - ${paneWidth + 24}px)`))
           }],
           marginRight: "mr3"
         } : {}
@@ -22555,7 +22577,17 @@ function EnvironmentBanner(props) {
   }), role: "banner", ...tid, children: [
     getInvertedCorner("left", bgColorVar),
     getInvertedCorner("right", bgColorVar),
-    /* @__PURE__ */ jsxs86("div", { className: "relative z2 df aic jcsb h100 pl1 mdandup_pl5 pr1 mdandup_pr5", ...tid.content, children: [
+    /* @__PURE__ */ jsxs86("div", { ...trussProps89({
+      ...{
+        position: "relative",
+        zIndex: "z2",
+        display: "df",
+        alignItems: "aic",
+        justifyContent: "jcsb",
+        height: "h100"
+      },
+      ...headerContentPaddingX()
+    }), ...tid.content, children: [
       /* @__PURE__ */ jsxs86("span", { className: "df aic gap2 fg1 mh0 oh", ...tid.left, children: [
         /* @__PURE__ */ jsx176(Tag, { text: badgeLabel, xss: {
           backgroundColor: "bgColor_FFFFFF90"
@@ -22744,7 +22776,7 @@ function ResponsiveGridItem(props) {
 // src/components/Grid/useResponsiveGrid.ts
 import { useMemo as useMemo47 } from "react";
 import { maybeCssVar as maybeCssVar48 } from "@homebound/truss/runtime";
-var __maybeInc17 = (inc) => {
+var __maybeInc18 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function useResponsiveGrid(props) {
@@ -22766,7 +22798,7 @@ function useResponsiveGrid(props) {
       }],
       containerType: "ctis",
       gap: ["gap_var", {
-        "--gap": maybeCssVar48(__maybeInc17(gridGap))
+        "--gap": maybeCssVar48(__maybeInc18(gridGap))
       }]
     };
   }, [minColumnWidth, gap, columns]);
@@ -22891,7 +22923,7 @@ function HbSpinnerProvider({
 // src/components/HomeboundLogo.tsx
 import { trussProps as trussProps92, maybeCssVar as maybeCssVar49 } from "@homebound/truss/runtime";
 import { jsx as jsx180 } from "react/jsx-runtime";
-var __maybeInc18 = (inc) => {
+var __maybeInc19 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function HomeboundLogo(props) {
@@ -22905,10 +22937,10 @@ function HomeboundLogo(props) {
       "--fill": maybeCssVar49(fill)
     }],
     width: ["w_var", {
-      "--width": maybeCssVar49(__maybeInc18(width2))
+      "--width": maybeCssVar49(__maybeInc19(width2))
     }],
     height: ["h_var", {
-      "--height": maybeCssVar49(__maybeInc18(height))
+      "--height": maybeCssVar49(__maybeInc19(height))
     }]
   }), children: /* @__PURE__ */ jsx180("path", { d: "M158.1,97.6H0.2L0,39.7L76.8,0l68,38.7l-3.1,5.3l-65-37L6.2,43.4l0.2,48h151.7V97.6z" }) });
 }
@@ -23273,7 +23305,7 @@ function useAppNavGroupExpanded(linkGroup) {
 // src/components/AppNav/AppNavGroup.tsx
 import { trussProps as trussProps96, maybeCssVar as maybeCssVar51 } from "@homebound/truss/runtime";
 import { Fragment as Fragment41, jsx as jsx184, jsxs as jsxs90 } from "react/jsx-runtime";
-var __maybeInc19 = (inc) => {
+var __maybeInc20 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function AppNavGroupView(props) {
@@ -23320,7 +23352,7 @@ function AppNavGroupDisclosure(props) {
       overflow: "oh",
       transition: "transitionHeight",
       height: ["h_var", {
-        "--height": maybeCssVar51(__maybeInc19(contentHeight))
+        "--height": maybeCssVar51(__maybeInc20(contentHeight))
       }]
     }), ...tid.panel, ...!expanded ? {
       inert: "true"
@@ -23552,24 +23584,36 @@ function NavbarMobileDrawer({
       duration: 0.2
     }, onClick: (e) => e.stopPropagation(), ...tid.mobileMenuDrawer, children: [
       /* @__PURE__ */ jsx189("div", { ...trussProps98({
-        display: "df",
-        alignItems: "aic",
-        justifyContent: "jcfe",
-        paddingLeft: "pl3",
-        paddingRight: "pr3",
-        paddingTop: "pt_12px",
-        paddingBottom: "pb_12px",
-        flexShrink: "fs0",
-        borderBottomStyle: "bbs_solid",
-        borderBottomWidth: "bbw_1px",
-        borderColor: ["bc_var", {
-          "--borderColor": "var(--b-surface-separator)"
-        }]
+        ...{
+          display: "df",
+          alignItems: "aic",
+          justifyContent: "jcfe",
+          paddingTop: "pt_12px",
+          paddingBottom: "pb_12px",
+          flexShrink: "fs0",
+          borderBottomStyle: "bbs_solid",
+          borderBottomWidth: "bbw_1px",
+          borderColor: ["bc_var", {
+            "--borderColor": "var(--b-surface-separator)"
+          }]
+        },
+        ...pageContentPaddingX
       }), children: /* @__PURE__ */ jsx189(IconButton, { icon: "x", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: "Close navigation", onClick: onClose, ...tid.mobileMenuClose }) }),
       /* @__PURE__ */ jsx189(
         "nav",
         {
-          className: "fg1 oya pl3 pr3 pb3 pt2 df fdc gap_4px",
+          ...trussProps98({
+            ...{
+              flexGrow: "fg1",
+              overflowY: "oya",
+              paddingBottom: "pb3",
+              paddingTop: "pt2",
+              display: "df",
+              flexDirection: "fdc",
+              gap: "gap_4px"
+            },
+            ...pageContentPaddingX
+          }),
           onClickCapture: (e) => {
             if (e.target.closest("a")) {
               onClose();
@@ -23605,23 +23649,20 @@ function Navbar(props) {
   } = useContentOverflow(!sm);
   const showMobile = sm || overflows;
   return /* @__PURE__ */ jsx190(ContrastScope, { children: /* @__PURE__ */ jsxs93("nav", { ...trussProps99({
-    backgroundColor: ["bgColor_var", {
-      "--backgroundColor": "var(--b-surface-raised)"
-    }],
-    flexShrink: "fs0",
-    display: "df",
-    alignItems: "aic",
-    justifyContent: "jcsb",
-    whiteSpace: "wsnw",
-    paddingLeft: "pl1",
-    paddingRight: "pr1",
-    paddingTop: "pt1",
-    paddingBottom: "pb1",
-    gap: "gap2",
-    ...!showMobile ? {
-      paddingLeft: "pl5",
-      paddingRight: "pr5"
-    } : {}
+    ...{
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": "var(--b-surface-raised)"
+      }],
+      flexShrink: "fs0",
+      display: "df",
+      alignItems: "aic",
+      justifyContent: "jcsb",
+      whiteSpace: "wsnw",
+      paddingTop: "pt1",
+      paddingBottom: "pb1",
+      gap: "gap2"
+    },
+    ...headerContentPaddingX(showMobile)
   }), ...tid, children: [
     /* @__PURE__ */ jsxs93("div", { className: "df aic gap3 fg1 mw0", children: [
       /* @__PURE__ */ jsxs93("div", { className: "df aic fs0 gap2", children: [
@@ -24061,7 +24102,7 @@ import { useButton as useButton12, useFocusRing as useFocusRing17, useHover as u
 import { trussProps as trussProps102, maybeCssVar as maybeCssVar54 } from "@homebound/truss/runtime";
 import { jsx as jsx195, jsxs as jsxs97 } from "react/jsx-runtime";
 import { createElement as createElement5 } from "react";
-var __maybeInc20 = (inc) => {
+var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function Stepper(props) {
@@ -24117,7 +24158,7 @@ function Stepper(props) {
       transition: "transition_width_200ms",
       height: "h100",
       width: ["w_var", {
-        "--width": maybeCssVar54(__maybeInc20(`${(lastCompletedStep + 1) / steps.length * 100}%`))
+        "--width": maybeCssVar54(__maybeInc21(`${(lastCompletedStep + 1) / steps.length * 100}%`))
       }]
     }) }) })
   ] });
@@ -24338,7 +24379,9 @@ var stepperTabStyles = {
     fontSize: "fz_14px",
     lineHeight: "lh_20px",
     overflow: "oh",
-    textAlign: "tal"
+    textAlign: "tal",
+    height: "h_48px",
+    transition: "transitionAll"
   },
   hoverStyles: {
     backgroundColor: "bgGray100"
@@ -24363,12 +24406,14 @@ function StepperTabs(props) {
   const {
     steps,
     currentStep,
-    onChange
+    onChange,
+    collapsed: forceCollapsed
   } = props;
   const tid = useTestIds(props, "stepperTabs");
   const {
-    sm: collapsed
+    sm: isMobile
   } = useBreakpoint();
+  const collapsed = isMobile || !!forceCollapsed;
   const capWidth = steps.length <= 3;
   return /* @__PURE__ */ jsx197("nav", { "aria-label": "steps", className: "w100", ...tid, children: /* @__PURE__ */ jsx197("ol", { ...trussProps104({
     padding: "p_0",
@@ -25005,7 +25050,7 @@ function useToast() {
 // src/layouts/SideNavLayout/SideNavLayout.tsx
 import { trussProps as trussProps107, mergeProps as mergeProps33, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
 import { jsx as jsx204, jsxs as jsxs104 } from "react/jsx-runtime";
-var __maybeInc21 = (inc) => {
+var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function SideNavLayout(props) {
@@ -25060,11 +25105,11 @@ function SideNavLayoutContent(props) {
         "--zIndex": maybeCssVar57(zIndices.sideNav)
       }],
       top: ["top_var", {
-        "--top": maybeCssVar57(__maybeInc21(navTop))
+        "--top": maybeCssVar57(__maybeInc22(navTop))
       }],
       alignSelf: "asfs",
       height: ["h_var", {
-        "--height": maybeCssVar57(__maybeInc21(railViewportHeight))
+        "--height": maybeCssVar57(__maybeInc22(railViewportHeight))
       }],
       width: ["w_var", {
         "--width": `${collapsed ? railCollapsedWidthPx : railWidthPx}px`
@@ -25074,7 +25119,7 @@ function SideNavLayoutContent(props) {
         position: "fixed",
         left: "left0",
         top: ["top_var", {
-          "--top": maybeCssVar57(__maybeInc21(navTop))
+          "--top": maybeCssVar57(__maybeInc22(navTop))
         }],
         bottom: "bottom0",
         zIndex: ["z_var", {
@@ -25119,7 +25164,7 @@ function SideNavLayoutContent(props) {
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
 import { trussProps as trussProps108, mergeProps as mergeProps34, maybeCssVar as maybeCssVar58 } from "@homebound/truss/runtime";
 import { jsx as jsx205, jsxs as jsxs105 } from "react/jsx-runtime";
-var __maybeInc22 = (inc) => {
+var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function EnvironmentBannerLayout(props) {
@@ -25153,7 +25198,7 @@ function EnvironmentBannerLayout(props) {
         "--zIndex": maybeCssVar58(zIndices.environmentBanner)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar58(__maybeInc22(innerWidth))
+        "--width": maybeCssVar58(__maybeInc23(innerWidth))
       }]
     }), ...tid.bannerSticky, children: /* @__PURE__ */ jsx205(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
@@ -25284,7 +25329,7 @@ function useNavbarLayoutHeight() {
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 import { jsx as jsx207, jsxs as jsxs106 } from "react/jsx-runtime";
-var __maybeInc23 = (inc) => {
+var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function NavbarLayout(props) {
@@ -25315,7 +25360,7 @@ function NavbarLayout(props) {
         "--zIndex": maybeCssVar59(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar59(__maybeInc23(innerWidth))
+        "--width": maybeCssVar59(__maybeInc24(innerWidth))
       }]
     }
   ) : (
@@ -25327,7 +25372,7 @@ function NavbarLayout(props) {
         "--zIndex": maybeCssVar59(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": maybeCssVar59(__maybeInc23(innerWidth))
+        "--width": maybeCssVar59(__maybeInc24(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -25389,10 +25434,9 @@ function BaseHeader(props) {
         display: "df",
         justifyContent: "jcsb",
         width: "w100",
-        gap: "gap1",
-        paddingLeft: "pl3",
-        paddingRight: "pr3"
+        gap: "gap1"
       },
+      ...pageContentPaddingX,
       ...{
         ...!bottomSlot ? {
           marginBottom: "mb2"
@@ -25410,6 +25454,7 @@ function BaseHeader(props) {
 }
 
 // src/components/Headers/PageHeader.tsx
+import { trussProps as trussProps110 } from "@homebound/truss/runtime";
 import { jsx as jsx209 } from "react/jsx-runtime";
 function PageHeader2(props) {
   const {
@@ -25417,7 +25462,7 @@ function PageHeader2(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ jsx209(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ jsx209("div", { className: "pl3 pr3", children: /* @__PURE__ */ jsx209(Tabs, { ...tabs, ...tid.tabs }) }) });
+  return /* @__PURE__ */ jsx209(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ jsx209("div", { ...trussProps110(pageContentPaddingX), children: /* @__PURE__ */ jsx209(Tabs, { ...tabs, ...tid.tabs }) }) });
 }
 
 // src/layouts/useBannerAndNavbarHeight.ts
@@ -25428,7 +25473,7 @@ function useBannerAndNavbarHeight() {
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
 import { mergeProps as mergeProps36, maybeCssVar as maybeCssVar60 } from "@homebound/truss/runtime";
 import { jsx as jsx210, jsxs as jsxs108 } from "react/jsx-runtime";
-var __maybeInc24 = (inc) => {
+var __maybeInc25 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function PageHeaderLayout(props) {
@@ -25458,10 +25503,10 @@ function PageHeaderLayout(props) {
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": maybeCssVar60(__maybeInc24(headerLeft))
+      "--left": maybeCssVar60(__maybeInc25(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar60(__maybeInc24(headerWidth))
+      "--width": maybeCssVar60(__maybeInc25(headerWidth))
     }],
     zIndex: ["z_var", {
       "--zIndex": maybeCssVar60(zIndices.pageStickyHeader)
@@ -25469,10 +25514,10 @@ function PageHeaderLayout(props) {
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": maybeCssVar60(__maybeInc24(headerLeft))
+      "--left": maybeCssVar60(__maybeInc25(headerLeft))
     }],
     width: ["w_var", {
-      "--width": maybeCssVar60(__maybeInc24(headerWidth))
+      "--width": maybeCssVar60(__maybeInc25(headerWidth))
     }],
     zIndex: ["z_var", {
       "--zIndex": maybeCssVar60(zIndices.pageStickyHeader)
@@ -25497,6 +25542,175 @@ function PageHeaderLayout(props) {
     /* @__PURE__ */ jsx210("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }
+
+// src/layouts/WorkflowLayout/WorkflowLayout.tsx
+import { useCallback as useCallback40, useLayoutEffect as useLayoutEffect10, useRef as useRef67, useState as useState59 } from "react";
+
+// src/components/Headers/WorkflowHeader.tsx
+import { jsx as jsx211 } from "react/jsx-runtime";
+function WorkflowHeader(props) {
+  const { stepperTabs, ...otherProps } = props;
+  const tid = useTestIds(otherProps, "header");
+  return /* @__PURE__ */ jsx211(BaseHeader, { ...otherProps, bottomSlot: /* @__PURE__ */ jsx211(StepperTabs, { ...stepperTabs, ...tid.stepperTabs }) });
+}
+
+// src/layouts/WorkflowLayout/WorkflowActions.tsx
+import { jsx as jsx212, jsxs as jsxs109 } from "react/jsx-runtime";
+function WorkflowActions(props) {
+  const {
+    isFirstStep,
+    isLastStep,
+    isMobile,
+    onBack,
+    onCancel,
+    onSaveAndExit,
+    completeLabel,
+    onComplete,
+    onContinue,
+    primaryDisabled
+  } = props;
+  return /* @__PURE__ */ jsxs109("div", { className: "df aic jcsb sm_w100", children: [
+    /* @__PURE__ */ jsx212("div", { className: "df aic", children: !isFirstStep && (isMobile ? /* @__PURE__ */ jsx212(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) : /* @__PURE__ */ jsx212(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: onBack })) }),
+    /* @__PURE__ */ jsxs109("div", { className: "df aic gap1", children: [
+      /* @__PURE__ */ jsx212(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
+      onSaveAndExit && /* @__PURE__ */ jsx212(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
+      isLastStep ? /* @__PURE__ */ jsx212(Button, { label: completeLabel, variant: "primary", onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ jsx212(Button, { label: "Continue", variant: "primary", onClick: onContinue, disabled: primaryDisabled })
+    ] })
+  ] });
+}
+
+// src/layouts/WorkflowLayout/WorkflowLayout.tsx
+import { trussProps as trussProps111, mergeProps as mergeProps37, maybeCssVar as maybeCssVar61 } from "@homebound/truss/runtime";
+import { jsx as jsx213, jsxs as jsxs110 } from "react/jsx-runtime";
+var __maybeInc26 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
+};
+function WorkflowLayout(props) {
+  const {
+    steps,
+    defaultStep,
+    onCancel,
+    completeLabel,
+    onComplete,
+    onSaveAndExit,
+    ...headerProps
+  } = props;
+  const tabSteps = steps.map((step) => ({
+    ...step,
+    value: defaultTestId(step.label)
+  }));
+  const [currentStep, setCurrentStep] = useState59(() => getInitialStep(tabSteps, defaultStep));
+  const tid = useTestIds(props, "workflowLayout");
+  const {
+    sm: isMobile
+  } = useBreakpoint();
+  const bannerAndNavbarHeight = useBannerAndNavbarHeight();
+  const bannerAndNavbarHeightRef = useRef67(bannerAndNavbarHeight);
+  bannerAndNavbarHeightRef.current = bannerAndNavbarHeight;
+  const getBannerAndNavbarHeight = useCallback40(() => bannerAndNavbarHeightRef.current, []);
+  const headerMetricsRef = useRef67(null);
+  const spacerRef = useRef67(null);
+  const headerHeight = useMeasuredHeight(headerMetricsRef, true);
+  const {
+    state: scrollState
+  } = useAutoHideOnScroll(spacerRef, true, getBannerAndNavbarHeight);
+  const collapsed = scrollState === "hidden";
+  const headerWidth = documentScrollChromeWidth();
+  const outerTop = bannerAndNavbarChromeTop();
+  const cssVars = headerHeight > 0 ? {
+    [beamPageHeaderLayoutHeightVar]: `${headerHeight}px`
+  } : void 0;
+  const currentIndex = isValidStep(tabSteps, currentStep) ? tabSteps.findIndex((step) => step.value === currentStep) : 0;
+  const isFirstStep = currentIndex <= 0;
+  const isLastStep = currentIndex === tabSteps.length - 1;
+  const activeStep = tabSteps[currentIndex];
+  const buttons = /* @__PURE__ */ jsx213(WorkflowActions, { isFirstStep, isLastStep, isMobile, onBack: () => setCurrentStep(tabSteps[currentIndex - 1].value), onCancel, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !activeStep?.completed, onContinue: () => setCurrentStep(tabSteps[currentIndex + 1].value) });
+  const showFooter = isMobile;
+  useLayoutEffect10(() => {
+    const root = document.documentElement;
+    const previous = root.style.getPropertyValue(beamWorkflowLayoutFooterHeightVar);
+    root.style.setProperty(beamWorkflowLayoutFooterHeightVar, showFooter ? `${mobileFooterHeightPx}px` : "0px");
+    return () => {
+      if (previous) {
+        root.style.setProperty(beamWorkflowLayoutFooterHeightVar, previous);
+      } else {
+        root.style.removeProperty(beamWorkflowLayoutFooterHeightVar);
+      }
+    };
+  }, [showFooter]);
+  const headerEl = /* @__PURE__ */ jsx213(WorkflowHeader, { ...headerProps, rightSlot: isMobile ? void 0 : buttons, stepperTabs: {
+    steps: tabSteps,
+    currentStep,
+    onChange: setCurrentStep,
+    collapsed
+  } });
+  return /* @__PURE__ */ jsx213(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs110("div", { ...mergeProps37(void 0, cssVars, {
+    display: "df",
+    flexDirection: "fdc",
+    width: "w100"
+  }), ...tid, children: [
+    /* @__PURE__ */ jsx213("div", { ref: spacerRef, ...mergeProps37(void 0, {
+      height: headerHeight
+    }, {
+      flexShrink: "fs0",
+      width: "w100"
+    }), ...tid.spacer, children: /* @__PURE__ */ jsx213("div", { ref: headerMetricsRef, ...trussProps111({
+      position: "fixed",
+      width: ["w_var", {
+        "--width": maybeCssVar61(__maybeInc26(headerWidth))
+      }],
+      zIndex: ["z_var", {
+        "--zIndex": maybeCssVar61(zIndices.pageStickyHeader)
+      }],
+      top: ["top_var", {
+        "--top": maybeCssVar61(__maybeInc26(outerTop))
+      }]
+    }), ...tid.header, children: headerEl }) }),
+    /* @__PURE__ */ jsx213("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children: activeStep?.content }),
+    showFooter && /* @__PURE__ */ jsx213("div", { ...trussProps111({
+      flexShrink: "fs0",
+      width: "w100",
+      height: ["h_var", {
+        "--height": `${mobileFooterHeightPx}px`
+      }]
+    }) }),
+    showFooter && /* @__PURE__ */ jsx213("div", { ...trussProps111({
+      ...{
+        position: "fixed",
+        bottom: "bottom0",
+        width: ["w_var", {
+          "--width": maybeCssVar61(__maybeInc26(headerWidth))
+        }],
+        height: ["h_var", {
+          "--height": `${mobileFooterHeightPx}px`
+        }],
+        zIndex: ["z_var", {
+          "--zIndex": maybeCssVar61(zIndices.pageStickyFooter)
+        }],
+        display: "df",
+        alignItems: "aic",
+        justifyContent: "jcfe",
+        gap: "gap1",
+        borderTopStyle: "bts_solid",
+        borderTopWidth: "btw_1px",
+        borderColor: ["bc_var", {
+          "--borderColor": "var(--b-surface-separator)"
+        }],
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": "var(--b-surface)"
+        }]
+      },
+      ...pageContentPaddingX
+    }), ...tid.footer, children: buttons })
+  ] }) });
+}
+var mobileFooterHeightPx = 80;
+function isValidStep(steps, value) {
+  return steps.some((step) => step.value === value);
+}
+function getInitialStep(steps, defaultStep) {
+  return defaultStep !== void 0 && isValidStep(steps, defaultStep) ? defaultStep : steps[0]?.value;
+}
 export {
   ASC,
   Accordion,
@@ -25664,6 +25878,7 @@ export {
   Tooltip,
   TreeSelectField,
   ViewToggleButton,
+  WorkflowLayout,
   actionColumn,
   applyRowFn,
   assignDefaultColumnIds,
@@ -25675,6 +25890,7 @@ export {
   beamPageHeaderLayoutHeightVar,
   beamSideNavLayoutWidthVar,
   beamTableActionsHeightVar,
+  beamWorkflowLayoutFooterHeightVar,
   booleanFilter,
   boundCheckboxField,
   boundCheckboxGroupField,
@@ -25737,10 +25953,12 @@ export {
   getColumnBorderCss,
   getDateFormat,
   getFirstOrLastCellCss,
+  getFloatingBottomOffset,
   getJustification,
   getNavLinkStyles,
   getTableRefWidthStyles,
   getTableStyles,
+  headerContentPaddingX,
   headerRenderFn,
   hoverStyles,
   increment,
@@ -25770,6 +25988,8 @@ export {
   nonKindGridColumnKeys,
   numberRangeFilter,
   numericColumn,
+  pageContentGutterPx,
+  pageContentPaddingX,
   parseDate,
   parseDateRange,
   parseWidthToPx,