src/patternfly/demos/Compass/examples/Compass.md (1)

210-228: Consider extracting the inline masthead into a shared partial.

This inline masthead markup is nearly identical to the one introduced in src/patternfly/demos/Page/page-template.hbs (lines 9-27). Extracting it into a reusable partial (e.g. inline-masthead-search) would reduce duplication and keep the two demos in sync as the docked-nav UX evolves.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/patternfly/demos/Compass/examples/Compass.md` around lines 210 - 228, The
inline masthead markup duplicated here should be extracted into a shared
Handlebars partial to avoid duplication; create a new partial (e.g.
inline-masthead-search) that contains the masthead block (including the
masthead, masthead-main, masthead-brand/masthead-logo, masthead-content,
toolbar/toolbar-content/toolbar-content-section, toolbar-item and the button
partial with its search icon and aria-label) and replace this inline block with
a call to that partial in Compass.md and the existing Page/page-template.hbs so
both demos reference the same shared partial.

src/patternfly/demos/Page/page-template.hbs (1)

9-27: Duplicated inline-masthead markup across Page and Compass demos.

The same inline masthead structure (main with toggle + brand/logo, plus a content section containing a static toolbar with a right-aligned search icon button) is now duplicated in src/patternfly/demos/Compass/examples/Compass.md (lines 210-228). Consider extracting into a shared partial so both demos stay in sync as docked-nav UX evolves.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/patternfly/demos/Page/page-template.hbs` around lines 9 - 27, Extract the
duplicated inline masthead block (the masthead with
masthead-main/masthead-brand/masthead-logo and the masthead-content containing a
static toolbar with toolbar-content-section/toolbar-item and the search button)
into a shared Handlebars partial (e.g., masthead-inline) and replace the inline
markup in both the Page demo and the Compass demo with a single partial include
({{> masthead-inline}}); update references to the unique symbols masthead,
masthead-main, masthead-brand, masthead-logo, masthead-content, toolbar,
toolbar-content-section, toolbar-item and button so both demos import and render
the new partial.

src/patternfly/components/Compass/compass.scss (2)

141-172: Hamburger/collapse state selectors look correct.

A quick note for future readers: the seemingly redundant enumeration at line 147 — :is(.#{$button}.pf-m-hamburger, .#{$button}.pf-m-hamburger:hover, .#{$button}.pf-m-hamburger:focus-visible) — is intentional. Because :is() takes the maximum specificity of its arguments, including the :hover/:focus-visible variants raises this rule's specificity to match the hover rule at line 143 so that source order (line 147 last) wins when the dock is expanded and the toggle is hovered. Consider adding a one-line comment here to prevent a future “simplification” from accidentally breaking this.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/patternfly/components/Compass/compass.scss` around lines 141 - 172, Add a
one-line clarifying comment above the selector using
:is(.#{$button}.pf-m-hamburger, .#{$button}.pf-m-hamburger:hover,
.#{$button}.pf-m-hamburger:focus-visible) (the rule that intentionally boosts
specificity to match the hover rule for .#{$masthead} .#{$masthead}__toggle
.#{$button}.pf-m-hamburger) stating that the hover/focus variants are included
to raise specificity so source order wins when the dock is expanded; place it
right above that selector in compass.scss so future maintainers don’t remove the
variants.

---

115-119: Use the $masthead SCSS variable instead of hardcoding the pf-v6-c-masthead prefix.

Elsewhere in this file the convention is to interpolate the component variable when writing its custom properties (e.g. line 230 --#{$panel}__main-body--PaddingBlockStart). Hardcoding --pf-v6-c-masthead-- couples this rule to the current prefix and drifts from the rest of the codebase.

♻️ Proposed change

     > .#{$masthead} {
-      --pf-v6-c-masthead--BackgroundColor: var(--#{$compass}--m-docked__masthead--BackgroundColor);
-  
+      --#{$masthead}--BackgroundColor: var(--#{$compass}--m-docked__masthead--BackgroundColor);
+
       grid-area: header;
     }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/patternfly/components/Compass/compass.scss` around lines 115 - 119,
Replace the hardcoded custom property name that uses the "pf-v6-c-masthead"
prefix with the interpolated component variable; in the .#{$masthead} rule
change the custom property key from --pf-v6-c-masthead--BackgroundColor to use
interpolation (e.g. --#{$masthead}--BackgroundColor) so it follows the
convention used elsewhere (see $masthead and $compass in this file) and keeps
the RHS var(...) reference intact.

src/patternfly/demos/Compass/examples/Compass.md (1)

206-224: LGTM — demo sections correctly exercise all four Expanded/TextExpanded combinations via the new compass--docked partial.

Optional nit: the surrounding sections (e.g., Dashboard, With drawer) include a short descriptive paragraph between the heading and the code fence. Consider adding a one-line description to each of the four new "Docked nav ..." sections so readers know what each variant demonstrates (mobile-collapsed vs. expanded-on-mobile vs. text-expanded overlay). Not blocking.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/patternfly/demos/Compass/examples/Compass.md` around lines 206 - 224, Add
a one-line descriptive sentence under each of the four "Docked nav" headings to
explain what the example demonstrates (e.g., mobile collapsed vs
expanded-on-mobile vs text-expanded vs text-expanded+mobile-expanded); update
the relevant examples that call the compass--docked partial
(compass--docked--id="compass-docked-example",
"compass-docked-mobile-expanded-example",
"compass-docked-text-expanded-example",
"compass-docked-text-expanded-mobile-expanded-example") and mention the key
flags used (compass-dock--IsExpanded and compass-dock--IsTextExpanded) so
readers immediately understand the variant shown.