@kaizen/components 3.3.5 → 3.3.7

package/dist/types/TitleBlock/TitleBlock.d.ts

@@ -4,6 +4,6 @@ import { type TitleBlockProps } from './types';
  * {@link https://cultureamp.design/?path=/docs/components-titleblock-api-specification--docs Storybook}
  */
 export declare const TitleBlock: {
-    ({ title, variant, breadcrumb, avatar, subtitle, sectionTitle, sectionTitleDescription, renderSectionTitle, pageSwitcherSelect, handleHamburgerClick, primaryAction, defaultAction, secondaryActions, secondaryOverflowMenuItems, navigationTabs, collapseNavigationAreaWhenPossible, textDirection, surveyStatus, id, titleAutomationId, avatarAutomationId, subtitleAutomationId, sectionTitleAutomationId, sectionTitleDescriptionAutomationId, breadcrumbAutomationId, breadcrumbTextAutomationId, }: TitleBlockProps): JSX.Element;
+    ({ title, variant, breadcrumb, avatar, subtitle, sectionTitle, sectionTitleDescription, renderSectionTitle, pageSwitcherSelect, handleHamburgerClick, primaryAction, defaultAction, secondaryActions, secondaryOverflowMenuItems, navigationTabs, collapseNavigationAreaWhenPossible, sticky, textDirection, surveyStatus, id, titleAutomationId, avatarAutomationId, subtitleAutomationId, sectionTitleAutomationId, sectionTitleDescriptionAutomationId, breadcrumbAutomationId, breadcrumbTextAutomationId, }: TitleBlockProps): JSX.Element;
     displayName: string;
 };

package/dist/types/TitleBlock/types.d.ts

@@ -31,6 +31,17 @@ export type TitleBlockProps = {
     secondaryOverflowMenuItems?: TitleBlockMenuItemProps[];
     navigationTabs?: NavigationTabs;
     collapseNavigationAreaWhenPossible?: boolean;
+    /**
+     * Makes the top strip stick to the top of its scrollable container as the
+     * content scrolls. The TitleBlock must be rendered inside a scrollable
+     * ancestor. When enabled the root becomes `display: contents` so the strip
+     * pins as a sibling of the scrolling content; its offset is
+     * `--app-chrome-sticky-offset` (owned by AppChrome, read-only) plus the
+     * opt-in `--titleblock-sticky-offset` a consumer sets to reserve space for a
+     * banner above it. Below 1080px the app-chrome offset is dropped to match the
+     * collapsed hamburger nav.
+     */
+    sticky?: boolean;
     textDirection?: TextDirection;
     surveyStatus?: SurveyStatus;
     id?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "3.3.5",
+  "version": "3.3.7",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -77,7 +77,7 @@
     "kaizen-codemod": "./bin/codemod.sh"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.1.8",
+    "@floating-ui/react-dom": "^2.1.9",
     "@headlessui/react": "^2.2.10",
     "@internationalized/date": "^3.8.2",
     "@popperjs/core": "^2.11.8",
@@ -106,13 +106,13 @@
     "prosemirror-history": "^1.5.0",
     "prosemirror-inputrules": "^1.5.1",
     "prosemirror-keymap": "^1.2.3",
-    "prosemirror-model": "^1.25.10",
+    "prosemirror-model": "^1.25.11",
     "prosemirror-schema-basic": "^1.2.4",
     "prosemirror-schema-list": "^1.5.1",
     "prosemirror-state": "^1.4.4",
     "prosemirror-transform": "^1.12.0",
     "prosemirror-utils": "^1.2.2",
-    "prosemirror-view": "^1.42.0",
+    "prosemirror-view": "^1.42.1",
     "react-animate-height": "^3.2.4",
     "react-aria": "^3.41.1",
     "react-aria-components": "^1.10.1",
@@ -130,8 +130,8 @@
   },
   "devDependencies": {
     "@cultureamp/frontend-apis": "13.3.0",
-    "@cultureamp/i18n-react-intl": "^4.2.1",
-    "@cultureamp/package-bundler": "^4.0.1",
+    "@cultureamp/i18n-react-intl": "^4.3.2",
+    "@cultureamp/package-bundler": "^4.1.0",
     "@svgr/rollup": "^8.1.0",
     "cssnano": "^7.1.9",
     "@testing-library/dom": "^10.4.1",
@@ -140,13 +140,13 @@
     "@types/react-highlight": "^0.12.8",
     "@types/react-textfit": "^1.1.4",
     "@types/uuid": "^11.0.0",
-    "autoprefixer": "^10.5.2",
+    "autoprefixer": "^10.5.4",
     "concat-cli": "^4.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest-axe": "^10.0.0",
     "lodash.isempty": "^4.4.0",
     "normalize.css": "^8.0.1",
-    "postcss": "^8.5.16",
+    "postcss": "^8.5.19",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
     "postcss-preset-env": "^11.3.2",
@@ -155,15 +155,15 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-highlight": "^0.15.0",
-    "react-intl": "^10.1.15",
+    "react-intl": "^10.1.18",
     "rollup": "^4.62.2",
     "sass": "1.79.6",
     "serialize-query-params": "^2.0.4",
-    "svgo": "^4.0.1",
+    "svgo": "^4.0.2",
     "ts-patch": "^3.3.0",
     "tslib": "^2.8.1",
-    "tsx": "^4.23.0",
-    "@kaizen/design-tokens": "11.0.13"
+    "tsx": "^4.23.1",
+    "@kaizen/design-tokens": "11.0.14"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

package/src/TitleBlock/TitleBlock.module.scss

@@ -61,6 +61,35 @@
     display: flex;
     width: 100%;
     justify-content: center;
+    position: relative;
+  }
+
+  .sticky {
+    display: contents;
+
+    .titleRow {
+      z-index: 5;
+      position: sticky;
+      top: calc(var(--app-chrome-sticky-offset, 72px) + var(--titleblock-sticky-offset, 0px));
+
+      @media (width < 1080px) {
+        top: var(--titleblock-sticky-offset, 0);
+      }
+    }
+
+    .rowBelowSeparator {
+      z-index: 0;
+    }
+  }
+
+  .sticky .titleRow,
+  .sticky .rowBelowSeparator {
+    background-color: $dt-color-background-color-default;
+  }
+
+  .sticky.lightVariant .titleRow,
+  .sticky.lightVariant .rowBelowSeparator {
+    background-color: $color-white;
   }
 
   .lightVariant .titleRow {
@@ -71,6 +100,19 @@
     background-color: $color-white;
   }
 
+  .sticky.adminVariant .titleRow {
+    background-color: $color-white;
+  }
+
+  .sticky.adminVariant .rowBelowSeparator {
+    background-color: $dt-color-background-color-admin;
+  }
+
+  .sticky.educationVariant .titleRow,
+  .sticky.educationVariant .rowBelowSeparator {
+    background-color: $dt-color-background-color-eduction;
+  }
+
   %titleBlockInner {
     box-sizing: border-box;
     max-width: $layout-content-max-width;

package/src/TitleBlock/TitleBlock.tsx

@@ -248,6 +248,7 @@ export const TitleBlock = ({
   secondaryOverflowMenuItems,
   navigationTabs,
   collapseNavigationAreaWhenPossible = false,
+  sticky = false,
   textDirection,
   surveyStatus,
   id,
@@ -280,6 +281,7 @@ export const TitleBlock = ({
           collapseNavigationArea &&
             !(sectionTitle ?? sectionTitleDescription ?? renderSectionTitle) &&
             styles.collapseNavigationArea,
+          sticky && styles.sticky,
           title && title.length >= 30 && styles.hasLongTitle,
           subtitle &&
             typeof subtitle === 'string' &&

package/src/TitleBlock/_docs/TitleBlock--sticky-banner-guidelines.mdx

@@ -0,0 +1,192 @@
+import { Canvas, Meta } from '@storybook/blocks'
+import { ResourceLinks } from '~storybook/components'
+import * as TitleBlockStories from './TitleBlock.stories'
+
+<Meta title="Components/TitleBlock/Sticky Banner" />
+
+# Sticky banner above a sticky TitleBlock
+
+How to reserve sticky space for a banner above a Kaizen `TitleBlock` — using an
+**additive** CSS variable.
+
+📌 **The rule.** The banner and the TitleBlock strip both pin to the top of the
+scroll container. TitleBlock exposes an additive offset
+`--titleblock-sticky-offset` that your app sets to the banner's height, so the
+strip pins directly below the banner.
+
+<Canvas of={TitleBlockStories.WithGlobalNotificationAbove} />
+
+## 1. The mechanism (@kaizen/components)
+
+Passing `sticky` sets the TitleBlock root to `display: contents` (so it generates
+no box and its strip becomes a sibling of your content in the scroll container)
+and makes the top strip `position: sticky`. The strip's `top` is the sum of two
+variables:
+
+```scss
+/* @kaizen/components — TitleBlock strip */
+.titleRow {
+  position: sticky;
+  top: calc(
+    var(--app-chrome-sticky-offset, 72px) /* owned by AppChrome */ +
+      var(--titleblock-sticky-offset, 0px) /* opt-in, per consumer */
+  );
+}
+@media (width < 1080px) {
+  /* nav collapses to a hamburger: no top bar */
+  .titleRow {
+    top: var(--titleblock-sticky-offset, 0);
+  }
+}
+```
+
+**Additive = safe by default.** `--titleblock-sticky-offset` defaults to `0`, so
+every existing TitleBlock is byte-for-byte unchanged unless a consumer opts in.
+And because the shared `--app-chrome-sticky-offset` keeps its value, apps that
+read it for other things (e.g. public-api-ui's
+`min-h-[calc(100vh - var(--app-chrome-sticky-offset))]`) are unaffected.
+
+## 2. Structure (consuming apps)
+
+Render the banner and the TitleBlock as siblings in the scroll container. Set
+`--titleblock-sticky-offset` on a thin `display: contents` wrapper around the
+TitleBlock (it adds no box, so it doesn't affect sticky). The banner just reads
+the shared offset for its own pinned position — read-only, never reassigned.
+
+```
+scroll container  (AppChrome content / window)
+│
+├─ <banner>   position: sticky
+│                top: 0  →  var(--app-chrome-sticky-offset) at ≥1080px
+│
+└─ <div>  display: contents
+     --titleblock-sticky-offset: {bannerHeight}px
+     │
+     └─ <TitleBlock sticky />
+          └─ .titleRow  sticky, top = chromeOffset + bannerHeight
+│
+└─ page content  (scrolls beneath both)
+```
+
+## 3. The code (consuming apps)
+
+```tsx
+<div
+  ref={bannerRef}
+  // sticky at all widths: top:0 on mobile (no nav bar),
+  // below the app-chrome bar at >=1080px
+  className="sticky top-0 z-[7] flex items-center justify-center
+             min-[1080px]:top-[var(--app-chrome-sticky-offset)]"
+>
+  Banner content
+</div>
+
+<div
+  style={{
+    display: 'contents',
+    // reserve space for the banner; kaizen adds this to the strip's top
+    '--titleblock-sticky-offset': `${bannerHeight}px`,
+  }}
+>
+  <TitleBlock sticky … />
+</div>
+```
+
+No alias variable, no cyclic-reference workaround, no second wrapper, and no
+breakpoint gate on the banner — the additive var handles both breakpoints.
+
+## 4. Measure the banner height (consuming app)
+
+Feed a live height into `--titleblock-sticky-offset` so the strip stays flush no
+matter how tall the banner gets (wrapping text, responsive padding). A
+`ResizeObserver` keeps it accurate. If the banner is a fixed height, a constant
+is fine instead.
+
+```tsx
+const bannerRef = React.useRef<HTMLDivElement>(null)
+// set the initial bannerHeight to the height of the GlobalNotification banner on desktop with English text
+const [bannerHeight, setBannerHeight] = React.useState(48)
+
+React.useLayoutEffect(() => {
+  const el = bannerRef.current
+  if (!el) return
+  const update = () => setBannerHeight(el.offsetHeight)
+  update()
+  const observer = new ResizeObserver(update)
+  observer.observe(el)
+  return () => observer.disconnect()
+}, [])
+```
+
+> **⚠️ Server-side rendering.** With a **dynamic** banner height the measured
+> value is only known after hydration. In an SSR app, when a user navigates
+> back/forward the browser restores the saved scroll position (Chrome's default),
+> but the page's memory cache can be missed — so the banner (starting at its
+> initial `useState` value) can flash and shift the TitleBlock into place after
+> hydration. Two mitigations, in order of preference:
+>
+> - **Prefer a fixed/bounded banner height.** Before reaching for a dynamic
+>   height, ask whether the content can be bounded: overflow the scroll, move
+>   items into a dropdown, or trim excess text with a "read more" modal. A
+>   constant height needs no measurement and can't flash.
+> - **Seed a sensible initial height** (as above — the desktop/English
+>   GlobalNotification height, e.g. `48`). This matches most users on first
+>   paint; only smaller screens or longer translations (where the text wraps to
+>   more lines) will adjust after measuring.
+
+## 5. Result: verified both widths
+
+Banner and strip stack flush, with no overlap or gap, both pinned through
+scroll. `strip.top − banner.top` equals the banner height at every width
+(example: a 48px banner on desktop may turn into a 128px banner on mobile as
+content shifts to new lines).
+
+<table>
+  <thead>
+    <tr>
+      <th>Width</th>
+      <th>Banner top</th>
+      <th>Strip top</th>
+      <th>Gap</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Desktop (≥1080px)</td>
+      <td>72px (chrome bar)</td>
+      <td>120px (72 + 48)</td>
+      <td>48px = banner height</td>
+    </tr>
+    <tr>
+      <td>Mobile (&lt;1080px)</td>
+      <td>0px (hamburger, no bar)</td>
+      <td>128px (0 + 128)</td>
+      <td>128px = banner height</td>
+    </tr>
+  </tbody>
+</table>
+
+Mobile pins the banner at `0` because the top nav collapses to a hamburger —
+there's no persistent bar to sit under. The `<1080px` rule drops the chrome
+offset and keeps only the additive banner offset, so the two stay in sync.
+
+## 6. Do & don't
+
+**Do**
+
+- Keep the banner and TitleBlock as **siblings** in the scroll container.
+- Set `--titleblock-sticky-offset` on a `display: contents` wrapper right around
+  the TitleBlock.
+- Feed a **measured** banner height into it (or a constant for a fixed banner).
+- Let the banner _read_ `--app-chrome-sticky-offset` for its own pin.
+
+**Don't**
+
+- Reassign `--app-chrome-sticky-offset` — it's a shared "app-chrome height"
+  signal other apps read; changing it resizes their layouts.
+- Wrap the TitleBlock in a box with height (e.g. a `<header>`) —
+  `display: contents` makes the strip's containing block that box, killing its
+  sticky travel.
+- Set `--titleblock-sticky-offset` on `:root`/`html` — scope it near the
+  TitleBlock so it can't leak to another nested one.
+- Hardcode `120px` — derive it from the banner height.

package/src/TitleBlock/_docs/TitleBlock.stories.tsx

@@ -3,9 +3,11 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { expect, waitFor, within } from '@storybook/test'
 import { Heading } from 'react-aria-components'
 import { Icon } from '~components/Icon'
+import { GlobalNotification } from '~components/Notification'
 import { assetUrl } from '~components/utils/hostedAssets'
 import { StickerSheet } from '~storybook/components/StickerSheet'
 import { NavigationTab, TitleBlock } from '../index'
+import stickyBannerStyles from './stickyBanner.module.css'
 
 const SECONDARY_ACTIONS = [
   {
@@ -125,6 +127,50 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
+const STICKY_SCROLLABLE_CONTAINER_STYLES = {
+  height: '200px',
+  overflowY: 'auto' as const,
+  backgroundColor: 'var(--color-white)',
+}
+
+const STICKY_SCROLLABLE_FRAME_STYLES = {
+  margin: '0 auto',
+  maxWidth: '1200px',
+  border: '1px solid var(--border-solid-border-color)',
+  borderRadius: '12px',
+  overflow: 'hidden' as const,
+  backgroundColor: 'var(--color-white)',
+}
+
+const renderStickyScrollableTitleBlock = (
+  args: React.ComponentProps<typeof TitleBlock>,
+): JSX.Element => (
+  <div style={STICKY_SCROLLABLE_FRAME_STYLES}>
+    <div
+      data-scroll-container="sticky-top-strip"
+      className={stickyBannerStyles.scrollContainer}
+      style={{
+        ...STICKY_SCROLLABLE_CONTAINER_STYLES,
+        // Taller than the shared default so the fake nav and the TitleBlock
+        // content fit without cramping.
+        height: '400px',
+      }}
+    >
+      <div className={stickyBannerStyles.fakeAppChromeNav}>Fake app chrome nav (72px)</div>
+
+      <TitleBlock {...args} />
+
+      <div
+        style={{
+          // Taller than the container so it overflows and the sticky behaviour
+          // (+ the play() scroll assertion) stays exercised.
+          height: '500px',
+        }}
+      />
+    </div>
+  </div>
+)
+
 export const Playground: Story = {
   parameters: {
     docs: {
@@ -692,3 +738,197 @@ export const WithOnlySecondaryActions: Story = {
     avatar: undefined,
   },
 }
+
+export const StickyTopStripInScrollableContainer: Story = {
+  name: 'Sticker Sheet (Sticky Top Strip In Scrollable Container)',
+  parameters: {
+    viewport: viewports,
+    chromatic: chromaticViewports,
+  },
+  args: {
+    sticky: true,
+  },
+  render: (args) => {
+    const { variant: _variant, ...argsWithoutVariant } = args
+
+    return (
+      <StickerSheet title="Sticky top strip within a scrollable container">
+        <StickerSheet.Row header="Default (Purple background)">
+          {renderStickyScrollableTitleBlock({
+            ...argsWithoutVariant,
+            title: 'Default Variant',
+            subtitle: 'Sticky top strip inside a scrollable content area',
+            breadcrumb: {
+              path: '#',
+              text: 'Back to home',
+            },
+            navigationTabs: [
+              <NavigationTab key="1" text="Overview" href="#" active />,
+              <NavigationTab key="2" text="Settings" href="#" />,
+            ],
+          })}
+        </StickerSheet.Row>
+        <StickerSheet.Row header="Education (Blue background)">
+          {renderStickyScrollableTitleBlock({
+            ...argsWithoutVariant,
+            variant: 'education',
+            title: 'Education Variant',
+            subtitle: 'Sticky top strip inside a scrollable content area',
+            breadcrumb: {
+              path: '#',
+              text: 'Back to courses',
+            },
+            navigationTabs: [
+              <NavigationTab key="1" variant="education" text="Lessons" href="#" active />,
+              <NavigationTab key="2" variant="education" text="Assignments" href="#" />,
+            ],
+          })}
+        </StickerSheet.Row>
+        <StickerSheet.Row header="Admin (White background)">
+          {renderStickyScrollableTitleBlock({
+            ...argsWithoutVariant,
+            variant: 'admin',
+            title: 'Admin Variant',
+            subtitle: 'Sticky top strip inside a scrollable content area',
+            breadcrumb: {
+              path: '#',
+              text: 'Back to dashboard',
+            },
+            navigationTabs: [
+              <NavigationTab key="1" variant="admin" text="Users" href="#" active />,
+              <NavigationTab key="2" variant="admin" text="Settings" href="#" />,
+            ],
+          })}
+        </StickerSheet.Row>
+        <StickerSheet.Row header="Light (White background)">
+          {renderStickyScrollableTitleBlock({
+            ...argsWithoutVariant,
+            variant: 'light',
+            title: 'Light Variant',
+            subtitle: 'Sticky top strip inside a scrollable content area',
+            breadcrumb: {
+              path: '#',
+              text: 'Back to overview',
+            },
+            navigationTabs: [
+              <NavigationTab key="1" variant="light" text="Details" href="#" active />,
+              <NavigationTab key="2" variant="light" text="Analytics" href="#" />,
+            ],
+          })}
+        </StickerSheet.Row>
+      </StickerSheet>
+    )
+  },
+  play: async ({ canvasElement, step }) => {
+    await step('scroll each sticky container before snapshot', async () => {
+      const scrollContainers = canvasElement.querySelectorAll<HTMLElement>(
+        '[data-scroll-container="sticky-top-strip"]',
+      )
+
+      scrollContainers.forEach((scrollContainer) => {
+        scrollContainer.scrollTo({
+          top: scrollContainer.scrollHeight - scrollContainer.clientHeight,
+        })
+      })
+
+      await waitFor(() => {
+        scrollContainers.forEach((scrollContainer) => {
+          expect(scrollContainer.scrollTop).toBeGreaterThan(0)
+        })
+      })
+    })
+  },
+}
+
+/**
+ * Sticky banner (GlobalNotification) above a sticky TitleBlock.
+ *
+ * Follows the additive-offset pattern: the banner pins below the app-chrome
+ * bar by *reading* the shared `--app-chrome-sticky-offset` (never reassigning
+ * it), and the TitleBlock strip reserves space for the banner via the opt-in
+ * `--titleblock-sticky-offset`, set on a `display: contents` wrapper right
+ * around the TitleBlock. The banner height is measured with a ResizeObserver
+ * and fed into that variable so the strip stays flush at any banner height.
+ */
+const StickyBannerAboveTitleBlock = (
+  args: React.ComponentProps<typeof TitleBlock>,
+): JSX.Element => {
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const [bannerHeight, setBannerHeight] = React.useState(0)
+
+  React.useLayoutEffect(() => {
+    // GlobalNotification doesn't forward a ref, so grab its DOM node by the
+    // data attribute to measure the banner height.
+    const el = containerRef.current?.querySelector<HTMLElement>('[data-sticky-banner]')
+    if (!el) return
+    const update = (): void => setBannerHeight(el.offsetHeight)
+    update()
+    const observer = new ResizeObserver(update)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <div
+      ref={containerRef}
+      data-scroll-container="sticky-top-strip"
+      className={stickyBannerStyles.scrollContainer}
+      style={{
+        height: '500px',
+        overflowY: 'auto',
+      }}
+    >
+      <div className={stickyBannerStyles.fakeAppChromeNav}>Fake app chrome nav (72px)</div>
+      <GlobalNotification
+        variant="informative"
+        persistent
+        data-sticky-banner
+        classNameOverride={stickyBannerStyles.stickyBanner}
+      >
+        This global notification renders directly above the TitleBlock.
+      </GlobalNotification>
+      <div
+        style={{
+          display: 'contents',
+          ['--titleblock-sticky-offset' as string]: `${bannerHeight}px`,
+        }}
+      >
+        <TitleBlock {...args} />
+      </div>
+
+      {/* Taller than the container so it overflows and the sticky behaviour
+          (+ the play() scroll assertion) stays exercised. */}
+      <div style={{ height: '600px' }} />
+    </div>
+  )
+}
+
+export const WithGlobalNotificationAbove: Story = {
+  parameters: {
+    viewport: viewports,
+    chromatic: chromaticViewports,
+  },
+  args: {
+    sticky: true,
+  },
+  render: (args) => <StickyBannerAboveTitleBlock {...args} />,
+  play: async ({ canvasElement, step }) => {
+    await step('scroll the sticky container before snapshot', async () => {
+      const scrollContainers = canvasElement.querySelectorAll<HTMLElement>(
+        '[data-scroll-container="sticky-top-strip"]',
+      )
+
+      scrollContainers.forEach((scrollContainer) => {
+        scrollContainer.scrollTo({
+          top: scrollContainer.scrollHeight - scrollContainer.clientHeight,
+        })
+      })
+
+      await waitFor(() => {
+        scrollContainers.forEach((scrollContainer) => {
+          expect(scrollContainer.scrollTop).toBeGreaterThan(0)
+        })
+      })
+    })
+  },
+}

package/src/TitleBlock/_docs/stickyBanner.module.css

@@ -0,0 +1,44 @@
+/* Pin below the app-chrome bar by reading the shared offset (read-only). */
+.stickyBanner {
+  position: sticky;
+  top: var(--app-chrome-sticky-offset, 72px);
+  z-index: 5;
+}
+
+/*
+ * Stand-in for the AppChrome content scroll area. Sets the shared
+ * `--app-chrome-sticky-offset` that the sticky titleRow and banner read.
+ * Below 1080px the AppChrome nav collapses to a hamburger (no persistent top
+ * bar), so the offset drops to 0 — matching kaizen's own
+ * `@media (width < 1080px)` rule on the titleRow.
+ */
+.scrollContainer {
+  --app-chrome-sticky-offset: 72px;
+}
+
+/*
+ * Fake AppChrome top nav — a sticky bar at >=1080px, removed below that
+ * (the real nav becomes a hamburger with no top bar).
+ */
+.fakeAppChromeNav {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  height: 72px;
+  padding-inline: 16px;
+  background-color: var(--color-purple-800);
+  color: var(--color-white);
+  font-weight: 600;
+}
+
+@media (width < 1080px) {
+  .scrollContainer {
+    --app-chrome-sticky-offset: 0;
+  }
+
+  .fakeAppChromeNav {
+    display: none;
+  }
+}