@akinon/pz-theme 2.0.55-beta.0 → 2.0.55

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.55-beta.0
+## 2.0.55
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd75]
-  - @akinon/next@2.0.55-beta.0
-  - @akinon/theme-contract@2.0.55-beta.0
+- 1225194: ZERO-4753: Render a separator glyph between nav menu and mega menu entries, plus an optional trailing fill band
+  - @akinon/next@2.0.55
+  - @akinon/theme-contract@2.0.55
 
 ## 2.0.54
 

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.55-beta.0",
+  "version": "2.0.55",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.55-beta.0",
+    "@akinon/next": "2.0.55",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.55-beta.0",
+    "@akinon/theme-contract": "2.0.55",
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
     "tailwind-merge": "^2.5.4",
     "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.55-beta.0",
+    "@akinon/next": "2.0.55",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/blocks/__tests__/menu-separator.test.tsx

@@ -0,0 +1,335 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+  usePathname: () => '/men',
+  useSearchParams: () => new URLSearchParams('')
+}));
+
+// Three entries, so "between" is measurable: two separators, never a third.
+// "Women" carries children so the submenu keeps rendering beside the glyph.
+const mockMenu = [
+  {
+    pk: 1,
+    label: 'Women',
+    url: '/women',
+    children: [{ pk: 11, label: 'Shoes', url: '/women/shoes', children: [] }]
+  },
+  { pk: 2, label: 'Men', url: '/men', children: [] },
+  { pk: 3, label: 'Sale', url: '/sale', children: [] }
+];
+
+jest.mock('@akinon/next/data/client/misc', () => ({
+  useGetMenuQuery: () => ({
+    data: mockMenu,
+    isLoading: false,
+    isFetching: false,
+    isSuccess: true,
+    isError: false
+  })
+}));
+
+import MegaMenuBlock from '../mega-menu-block';
+import NavMenuBlock from '../nav-menu-block';
+import { generateThemeCSS } from '../../utils';
+
+const blockProps = {
+  placeholderId: 'p',
+  sectionId: 's',
+  currentBreakpoint: 'desktop',
+  isDesigner: false
+};
+
+const mkBlock = (type: string, properties: Record<string, unknown> = {}) =>
+  ({
+    id: `${type}-1`,
+    type,
+    label: type,
+    order: 0,
+    hidden: false,
+    value: '',
+    properties,
+    styles: {},
+    blocks: []
+  } as never);
+
+const renderNav = (properties: Record<string, unknown> = {}) =>
+  render(
+    <NavMenuBlock block={mkBlock('nav-menu', properties)} {...blockProps} />
+  );
+
+const renderMega = (properties: Record<string, unknown> = {}) =>
+  render(
+    <MegaMenuBlock block={mkBlock('mega-menu', properties)} {...blockProps} />
+  );
+
+const separators = () =>
+  Array.from(document.querySelectorAll<HTMLElement>('[data-part="separator"]'));
+
+const trailingFill = () =>
+  document.querySelector('[data-part="trailing-fill"]') as HTMLElement | null;
+
+describe('NavMenuBlock — separator', () => {
+  it('draws one glyph between entries and none after the last', () => {
+    const { container } = renderNav({
+      separatorType: 'character',
+      separatorCharacter: '/'
+    });
+
+    expect(separators()).toHaveLength(mockMenu.length - 1);
+
+    const nav = container.querySelector('[data-nav-menu]') as HTMLElement;
+    // The row reads entry, glyph, entry, glyph, entry — the first entry is not
+    // preceded by punctuation and the last is not followed by it.
+    expect(
+      Array.from(nav.children).map((child) => child.getAttribute('data-part'))
+    ).toEqual(['item', 'separator', 'item', 'separator', 'item']);
+  });
+
+  it('emits nothing at all when the type is none', () => {
+    renderNav({ separatorCharacter: '/', trailingFill: true });
+
+    expect(separators()).toHaveLength(0);
+    expect(trailingFill()).toBeNull();
+  });
+
+  it('emits nothing when the chosen source has no glyph', () => {
+    // Type picked, icon never chosen: an empty span between every entry would
+    // still take the gap on both sides. The icon control's descriptor default
+    // is '' too, so nothing is what the panel advertises here.
+    renderNav({ separatorType: 'icon' });
+
+    expect(separators()).toHaveLength(0);
+  });
+
+  it('hides the glyph from assistive technology', () => {
+    renderNav({ separatorType: 'character', separatorCharacter: '·' });
+
+    separators().forEach((glyph) =>
+      expect(glyph).toHaveAttribute('aria-hidden', 'true')
+    );
+  });
+
+  it('keeps the submenu and the item states with a separator present', () => {
+    const { container } = renderNav({
+      showSubmenu: true,
+      submenuTrigger: 'hover',
+      separatorType: 'character',
+      separatorCharacter: '/',
+      highlightLabels: 'sale'
+    });
+
+    // The submenu is what the item-template workaround used to cost.
+    fireEvent.mouseEnter(
+      container.querySelector('[data-nav-item-wrapper]') as Element
+    );
+    expect(
+      document.querySelector('[data-nav-submenu][data-state="open"]')
+    ).toBeInTheDocument();
+    expect(screen.getByText('Shoes')).toBeInTheDocument();
+
+    // …and so were the open/selected states and the label highlights.
+    const items = Array.from(document.querySelectorAll('[data-part="item"]'));
+    expect(items[0]).toHaveAttribute('data-state', 'open');
+    expect(items[1]).toHaveAttribute('data-state', 'selected');
+    expect(items[2]).toHaveAttribute('data-nav-item', 'highlighted');
+    expect(separators()).toHaveLength(2);
+  });
+
+  it('tiles the glyph across the trailing band after the last entry', () => {
+    const { container } = renderNav({
+      separatorType: 'character',
+      separatorCharacter: '/',
+      separatorSize: 20,
+      separatorGap: 4,
+      trailingFill: true
+    });
+
+    const fill = trailingFill() as HTMLElement;
+    const nav = container.querySelector('[data-nav-menu]') as HTMLElement;
+
+    expect(nav.lastElementChild).toBe(fill);
+    expect(fill).toHaveAttribute('aria-hidden', 'true');
+    expect(fill.style.backgroundRepeat).toBe('repeat-x');
+    // One glyph plus the gap, so a repeated band breathes.
+    expect(fill.style.backgroundSize).toBe('24px 20px');
+    expect(fill.getAttribute('style')).toContain('flex: 1 1 auto');
+    expect(fill.style.backgroundImage).toContain('data:image/svg+xml');
+  });
+
+  it('tiles an uploaded image as the band', () => {
+    renderNav({
+      separatorType: 'image',
+      separatorImage: { url: 'https://cdn.example.com/dot.png' },
+      trailingFill: true
+    });
+
+    expect(separators()[0].style.backgroundImage).toContain(
+      'https://cdn.example.com/dot.png'
+    );
+    expect((trailingFill() as HTMLElement).style.backgroundImage).toContain(
+      'https://cdn.example.com/dot.png'
+    );
+  });
+
+  it('wraps inline icon markup as a data URI instead of dropping it', () => {
+    renderNav({
+      separatorType: 'icon',
+      separatorIcon: '<svg xmlns="http://www.w3.org/2000/svg"></svg>'
+    });
+
+    expect(separators()[0].style.backgroundImage).toContain(
+      'data:image/svg+xml'
+    );
+  });
+
+  it('refuses a source that would break out of the url() value', () => {
+    renderNav({
+      separatorType: 'image',
+      separatorImage: 'https://cdn.example.com/a.png") ; background: red; ("',
+      trailingFill: true
+    });
+
+    expect(separators()).toHaveLength(0);
+    expect(trailingFill()).toBeNull();
+  });
+});
+
+describe('MegaMenuBlock — separator', () => {
+  it('draws one list item between entries and none after the last', () => {
+    renderMega({ separatorType: 'character', separatorCharacter: '|' });
+
+    const list = document.querySelector('[data-mega-menu-list]') as HTMLElement;
+
+    expect(separators()).toHaveLength(mockMenu.length - 1);
+    expect(Array.from(list.children).map((child) => child.tagName)).toEqual([
+      'LI',
+      'LI',
+      'LI',
+      'LI',
+      'LI'
+    ]);
+    expect(list.lastElementChild).not.toHaveAttribute('data-part', 'separator');
+  });
+
+  it('keeps the panel opening with a separator present', () => {
+    renderMega({
+      trigger: 'click',
+      separatorType: 'character',
+      separatorCharacter: '|'
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Women' }));
+
+    expect(
+      document.querySelector('[data-mega-menu-panel]')
+    ).toBeInTheDocument();
+    expect(screen.getByText('Shoes')).toBeInTheDocument();
+    expect(separators()).toHaveLength(2);
+  });
+
+  it('closes the row with a trailing band', () => {
+    renderMega({
+      separatorType: 'character',
+      separatorCharacter: '|',
+      trailingFill: true
+    });
+
+    const list = document.querySelector('[data-mega-menu-list]') as HTMLElement;
+    const fill = trailingFill() as HTMLElement;
+
+    expect(list.lastElementChild).toBe(fill);
+    expect(fill.tagName).toBe('LI');
+    expect(fill.style.backgroundRepeat).toBe('repeat-x');
+  });
+
+  it('emits nothing at all when the type is none', () => {
+    renderMega({ trailingFill: true });
+
+    expect(separators()).toHaveLength(0);
+    expect(trailingFill()).toBeNull();
+  });
+});
+
+/**
+ * A descriptor default is advertised in the panel but never seeded into the
+ * stored composition, so a control the designer never opened arrives at the
+ * renderer absent. These pin the renderer's fallbacks to the values the panel
+ * shows, from the editor's `config/blocks/menu-separator-fields.ts` — if the
+ * two drift, the panel promises one thing and the canvas draws another.
+ */
+describe('separator — absent properties render what the panel advertises', () => {
+  // Straight from the editor descriptor's defaultValue fields.
+  const ADVERTISED = { character: '|', size: 12, gap: 8 };
+
+  it('draws the advertised character when the field was never opened', () => {
+    // The whole bug: picking "Character" and moving on used to render an empty
+    // span, so the menu looked untouched while the panel showed a pipe.
+    renderNav({ separatorType: 'character' });
+
+    const glyphs = separators();
+    expect(glyphs).toHaveLength(mockMenu.length - 1);
+    glyphs.forEach((glyph) =>
+      expect(glyph).toHaveTextContent(ADVERTISED.character)
+    );
+  });
+
+  it('sizes and spaces the glyph as the panel advertises', () => {
+    renderNav({ separatorType: 'character' });
+    const glyph = separators()[0];
+
+    expect(glyph.style.fontSize).toBe(`${ADVERTISED.size}px`);
+    expect(glyph.style.marginLeft).toBe(`${ADVERTISED.gap}px`);
+    expect(glyph.style.marginRight).toBe(`${ADVERTISED.gap}px`);
+  });
+
+  it('sizes an image glyph as the panel advertises', () => {
+    renderNav({
+      separatorType: 'image',
+      separatorImage: { url: 'https://cdn.example.com/dot.png' }
+    });
+
+    const glyph = separators()[0];
+    expect(glyph.style.width).toBe(`${ADVERTISED.size}px`);
+    expect(glyph.style.height).toBe(`${ADVERTISED.size}px`);
+  });
+
+  it('tiles the trailing band on the advertised size and gap', () => {
+    renderNav({ separatorType: 'character', trailingFill: true });
+
+    // One glyph plus the gap, both defaulted: 12 + 8.
+    expect((trailingFill() as HTMLElement).style.backgroundSize).toBe(
+      `${ADVERTISED.size + ADVERTISED.gap}px ${ADVERTISED.size}px`
+    );
+  });
+});
+
+/**
+ * The band is clipped by whatever holds the menu, so the group around it has to
+ * be able to say `overflow: hidden`. The CSS generator has no property
+ * whitelist, so this needs no renderer plumbing — but a whitelist added later
+ * would silently remove the only way to end the band on a partial glyph.
+ */
+describe('group box chrome — overflow', () => {
+  it('passes overflow through to the group wrapper rule', () => {
+    const css = generateThemeCSS(
+      [
+        {
+          id: 'sec-1',
+          blocks: [
+            {
+              id: 'grp-1',
+              type: 'group',
+              styles: { overflow: { desktop: 'hidden' } }
+            }
+          ]
+        }
+      ] as never,
+      'desktop'
+    );
+
+    expect(css).toContain('[data-block-id="grp-1"]');
+    expect(css).toContain('overflow: hidden');
+  });
+});

package/src/blocks/mega-menu-block.tsx

@@ -14,6 +14,11 @@ import { getResponsiveValue, partAttrs, resolveForceOpen } from '../utils';
 import { useOverlay } from '../hooks/use-overlay';
 import { BlockRendererProps } from './block-renderer-registry';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
+import {
+  MenuSeparator,
+  MenuTrailingFill,
+  readMenuSeparator
+} from './menu-separator';
 import { DesignerPlaceholder, readToggle } from './product-block-utils';
 
 /** Matches the dwell the reference brand header uses before a panel opens. */
@@ -188,9 +193,9 @@ const readPromoImage = (attributes: Record<string, unknown>): string => {
  * Properties: depth, parent, trigger, columns, showImages, highlightLabels,
  * highlightColor, columnGap, openDelay, closeDelay, showParentLink,
  * parentLinkLabel, promoPosition, promoMaxWidth, activeMatch, maxItems,
- * emptyText, loadingText.
+ * emptyText, loadingText, separator*, trailingFill.
  * Parts: menu, item, panel, parent-link, column, column-title, column-image,
- * submenu, submenu-item, promo.
+ * submenu, submenu-item, promo, separator, trailing-fill.
  */
 const MegaMenuBlock = ({
   block,
@@ -315,6 +320,8 @@ const MegaMenuBlock = ({
     )
   );
 
+  const separator = readMenuSeparator(block.properties, currentBreakpoint);
+
   const { data: menu, isLoading } = useGetMenuQuery({
     depth,
     ...(parent ? { parent } : {})
@@ -656,7 +663,7 @@ const MegaMenuBlock = ({
           padding: 0
         }}
       >
-        {items.map((item) => {
+        {items.map((item, index) => {
           const open = effectiveOpenKey === item.key;
           const highlighted = isHighlighted(item.label);
           const current = isCurrent(item.url);
@@ -671,9 +678,8 @@ const MegaMenuBlock = ({
             cursor: 'pointer'
           };
 
-          return (
+          const entry = (
             <li
-              key={item.key}
               data-mega-menu-item={highlighted ? 'highlighted' : 'default'}
               data-mega-menu-open={open ? 'true' : 'false'}
               onMouseEnter={() => {
@@ -724,7 +730,19 @@ const MegaMenuBlock = ({
               {open && renderPanel(item)}
             </li>
           );
+
+          // Punctuation goes BETWEEN entries, so the first one is not preceded
+          // by one. It is a list item like the entries it separates: anything
+          // else here would be markup a `ul` may not contain.
+          return (
+            <React.Fragment key={item.key}>
+              {index > 0 && <MenuSeparator settings={separator} as="li" />}
+              {entry}
+            </React.Fragment>
+          );
         })}
+
+        <MenuTrailingFill settings={separator} as="li" />
       </ul>
     </nav>
   );

package/src/blocks/menu-separator.tsx

@@ -0,0 +1,284 @@
+'use client';
+
+import React from 'react';
+import { getResponsiveValue, partAttrs, resolveOption } from '../utils';
+import { readToggle } from './product-block-utils';
+
+/**
+ * Menu punctuation: the glyph a brand draws BETWEEN top level menu entries, and
+ * the repeating band it draws after the last one.
+ *
+ * This is renderer-owned decoration rather than a block, because every way a
+ * designer had of producing it cost them the menu. Injecting a glyph through
+ * the item template REPLACES the built-in row, so the submenu, the `item` part
+ * with its hover/focus/selected states and the label highlights all disappear
+ * in the same swap; and a pseudo-element is unreachable from a composition
+ * (`content` is not in the generated property set and a part key has no
+ * pseudo-element slot). Rendering it here keeps the glyph alongside those
+ * features rather than in place of them.
+ *
+ * It lives next to both menu blocks rather than inside either: the two share
+ * one contract, so moving a header from `nav-menu` to `mega-menu` must not
+ * lose the decoration.
+ */
+
+export type MenuSeparatorType = 'none' | 'character' | 'icon' | 'image';
+
+const SEPARATOR_TYPES: MenuSeparatorType[] = [
+  'none',
+  'character',
+  'icon',
+  'image'
+];
+
+/**
+ * These mirror the descriptor defaults in the editor's
+ * `config/blocks/menu-separator-fields.ts`, and have to keep mirroring them.
+ *
+ * A descriptor default is only ever shown in the panel — it is not seeded into
+ * the stored composition — so a property the designer never touched arrives
+ * here absent. If the two sides disagree, the panel advertises one value and
+ * the canvas draws another, with nothing in either place saying why.
+ */
+const DEFAULT_SIZE = 12;
+const DEFAULT_GAP = 8;
+const DEFAULT_CHARACTER = '|';
+
+export interface MenuSeparatorSettings {
+  type: MenuSeparatorType;
+  character: string;
+  /** Resolved source for the `icon` and `image` types; '' when unusable. */
+  imageUrl: string;
+  size: number;
+  color: string;
+  gap: number;
+  trailingFill: boolean;
+}
+
+const readSize = (
+  value: unknown,
+  currentBreakpoint: string,
+  fallback: number
+): number => {
+  const numeric = Number(
+    getResponsiveValue(value, currentBreakpoint, fallback)
+  );
+  return Number.isFinite(numeric) && numeric >= 0 ? numeric : fallback;
+};
+
+/**
+ * The icon and file controls hand back a bare string, a `{ url }` record or a
+ * per breakpoint entry of either, so all three shapes are probed. Inline SVG
+ * markup (what the icon picker stores for a built-in glyph) is wrapped as a
+ * data URI here, so a single code path downstream can treat every source as an
+ * image address.
+ */
+const readMediaSource = (value: unknown, currentBreakpoint: string): string => {
+  if (value === undefined || value === null) return '';
+
+  let raw: unknown = value;
+
+  if (typeof raw === 'object') {
+    const record = raw as Record<string, unknown>;
+    raw =
+      typeof record.url === 'string'
+        ? record.url
+        : getResponsiveValue(record, currentBreakpoint, '');
+
+    if (typeof raw === 'object' && raw !== null) {
+      const nested = raw as Record<string, unknown>;
+      raw = typeof nested.url === 'string' ? nested.url : '';
+    }
+  }
+
+  const source = String(raw || '').trim();
+  if (!source) return '';
+
+  if (source.includes('<svg')) {
+    return `data:image/svg+xml,${encodeURIComponent(source)}`;
+  }
+
+  // The address is interpolated into a `url("…")` value, so a quote, a
+  // backslash, a closing paren or a newline would end the value early; and a
+  // scheme that executes has no business being a menu glyph.
+  if (/^\s*javascript:/i.test(source)) return '';
+  if (/["\\)\r\n]/.test(source)) return '';
+
+  return source;
+};
+
+export const readMenuSeparator = (
+  properties: Record<string, unknown> | undefined,
+  currentBreakpoint: string
+): MenuSeparatorSettings => {
+  const type = resolveOption<MenuSeparatorType>(
+    properties?.separatorType,
+    currentBreakpoint,
+    'none',
+    SEPARATOR_TYPES
+  );
+
+  const imageUrl =
+    type === 'icon'
+      ? readMediaSource(properties?.separatorIcon, currentBreakpoint)
+      : type === 'image'
+      ? readMediaSource(properties?.separatorImage, currentBreakpoint)
+      : '';
+
+  return {
+    type,
+    character: String(
+      getResponsiveValue(
+        properties?.separatorCharacter,
+        currentBreakpoint,
+        DEFAULT_CHARACTER
+      )
+    ),
+    imageUrl,
+    size: readSize(properties?.separatorSize, currentBreakpoint, DEFAULT_SIZE),
+    color: String(
+      getResponsiveValue(properties?.separatorColor, currentBreakpoint, '')
+    ),
+    gap: readSize(properties?.separatorGap, currentBreakpoint, DEFAULT_GAP),
+    trailingFill: readToggle(properties?.trailingFill, currentBreakpoint, false)
+  };
+};
+
+/** Whether the settings can actually draw a glyph. */
+export const hasMenuSeparator = (settings: MenuSeparatorSettings): boolean => {
+  if (settings.type === 'none') return false;
+  if (settings.type === 'character') return settings.character !== '';
+  return settings.imageUrl !== '';
+};
+
+const escapeXml = (value: string): string =>
+  value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;');
+
+/** Tile width: one glyph plus the gap, so a repeated band breathes. */
+const tileWidth = (settings: MenuSeparatorSettings): number =>
+  settings.size + settings.gap;
+
+/**
+ * The glyph as a CSS `url(…)` value, which is what lets the same source paint a
+ * repeating band. A character has no address, so it becomes a one-glyph SVG
+ * tile. `currentColor` inside an SVG used as an image resolves against the
+ * image's own initial colour (black) rather than the menu's, which is why the
+ * descriptor ships a colour control.
+ */
+const buildTileImage = (settings: MenuSeparatorSettings): string => {
+  if (settings.type === 'character') {
+    if (!settings.character) return '';
+
+    const width = tileWidth(settings);
+    const svg =
+      `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${settings.size}" ` +
+      `viewBox="0 0 ${width} ${settings.size}">` +
+      `<text x="50%" y="50%" text-anchor="middle" dominant-baseline="central" ` +
+      `font-size="${settings.size}" fill="${escapeXml(
+        settings.color || 'currentColor'
+      )}">${escapeXml(settings.character)}</text></svg>`;
+
+    return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+  }
+
+  return settings.imageUrl ? `url("${settings.imageUrl}")` : '';
+};
+
+type MenuDecorationTag = 'span' | 'li';
+
+interface MenuDecorationProps {
+  settings: MenuSeparatorSettings;
+  /** `li` inside the mega menu's list, `span` inside the nav menu's flex row. */
+  as?: MenuDecorationTag;
+}
+
+/**
+ * Punctuation between two entries. `aria-hidden` because it is exactly that:
+ * a screen reader announcing "slash" between every link would turn a six item
+ * menu into twelve announcements.
+ */
+export const MenuSeparator = ({
+  settings,
+  as: Tag = 'span'
+}: MenuDecorationProps): React.ReactElement | null => {
+  if (!hasMenuSeparator(settings)) return null;
+
+  const spacing = { marginLeft: settings.gap, marginRight: settings.gap };
+  const style: React.CSSProperties =
+    settings.type === 'character'
+      ? {
+          ...spacing,
+          flex: '0 0 auto',
+          display: 'inline-block',
+          alignSelf: 'center',
+          fontSize: `${settings.size}px`,
+          lineHeight: 1,
+          color: settings.color || 'inherit',
+          userSelect: 'none'
+        }
+      : {
+          ...spacing,
+          flex: '0 0 auto',
+          display: 'inline-block',
+          alignSelf: 'center',
+          width: `${settings.size}px`,
+          height: `${settings.size}px`,
+          backgroundImage: buildTileImage(settings),
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center',
+          backgroundSize: 'contain'
+        };
+
+  return (
+    <Tag
+      aria-hidden="true"
+      data-menu-separator=""
+      {...partAttrs('separator')}
+      style={style}
+    >
+      {settings.type === 'character' ? settings.character : null}
+    </Tag>
+  );
+};
+
+/**
+ * The band after the last entry: the same glyph tiled across whatever width is
+ * left in the row. It takes the remaining space with `flex: 1 1 auto`, so a
+ * menu that does not fill its container is finished off rather than leaving a
+ * ragged edge — the effect a brand would otherwise fake with a stretched image.
+ * Clipping the last partial glyph is the container's job (`overflow: hidden` on
+ * the group that holds the menu).
+ */
+export const MenuTrailingFill = ({
+  settings,
+  as: Tag = 'span'
+}: MenuDecorationProps): React.ReactElement | null => {
+  if (!settings.trailingFill) return null;
+
+  const tile = buildTileImage(settings);
+  if (!tile) return null;
+
+  return (
+    <Tag
+      aria-hidden="true"
+      data-menu-trailing-fill=""
+      {...partAttrs('trailing-fill')}
+      style={{
+        flex: '1 1 auto',
+        minWidth: 0,
+        alignSelf: 'center',
+        marginLeft: settings.gap,
+        height: `${settings.size}px`,
+        backgroundImage: tile,
+        backgroundRepeat: 'repeat-x',
+        backgroundPosition: 'left center',
+        backgroundSize: `${tileWidth(settings)}px ${settings.size}px`
+      }}
+    />
+  );
+};

package/src/blocks/nav-menu-block.tsx

@@ -7,6 +7,11 @@ import { useGetMenuQuery } from '@akinon/next/data/client/misc';
 import { getResponsiveValue, partAttrs, resolveForceOpen } from '../utils';
 import { BlockRendererProps } from './block-renderer-registry';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
+import {
+  MenuSeparator,
+  MenuTrailingFill,
+  readMenuSeparator
+} from './menu-separator';
 import { readToggle } from './product-block-utils';
 
 interface MenuItemLike {
@@ -32,8 +37,10 @@ const normalizePath = (value: unknown): string => {
  * placement, wording of the editor-only states, the optional submenu and
  * styling.
  * Properties: depth, parent, orientation, highlight*, showSubmenu,
- * submenuTrigger, activeMatch, maxItems, emptyText, loadingText.
- * Parts: menu, item (hover/focus/selected), submenu, submenu-item.
+ * submenuTrigger, activeMatch, maxItems, emptyText, loadingText, separator*,
+ * trailingFill.
+ * Parts: menu, item (hover/focus/selected), submenu, submenu-item, separator,
+ * trailing-fill.
  */
 const NavMenuBlock = ({
   block,
@@ -112,6 +119,8 @@ const NavMenuBlock = ({
     getResponsiveValue(block.properties?.loadingText, currentBreakpoint, '…')
   );
 
+  const separator = readMenuSeparator(block.properties, currentBreakpoint);
+
   const isHighlighted = (label?: string) =>
     Boolean(
       label &&
@@ -296,29 +305,47 @@ const NavMenuBlock = ({
           // Without a submenu the entry stays a bare link, exactly as it has
           // always rendered — the positioning wrapper only appears when a panel
           // actually needs somewhere to anchor.
-          if (!showSubmenu || !hasChildren) return link;
+          const entry =
+            !showSubmenu || !hasChildren ? (
+              link
+            ) : (
+              <span
+                data-nav-item-wrapper=""
+                onMouseEnter={() => {
+                  if (submenuTrigger === 'hover') setOpenKey(key);
+                }}
+                onMouseLeave={() => {
+                  if (submenuTrigger === 'hover' && !forcedOpen)
+                    setOpenKey(null);
+                }}
+                style={{
+                  position: 'relative',
+                  display: 'inline-flex',
+                  alignItems: 'center'
+                }}
+              >
+                {link}
+                {submenuPanel(item, key)}
+              </span>
+            );
 
+          // Punctuation goes BETWEEN entries, so the first one is not preceded
+          // by one. The fragment has no box of its own, so a composition that
+          // asks for no separator renders the row it always rendered.
           return (
-            <span
-              key={key}
-              data-nav-item-wrapper=""
-              onMouseEnter={() => {
-                if (submenuTrigger === 'hover') setOpenKey(key);
-              }}
-              onMouseLeave={() => {
-                if (submenuTrigger === 'hover' && !forcedOpen) setOpenKey(null);
-              }}
-              style={{
-                position: 'relative',
-                display: 'inline-flex',
-                alignItems: 'center'
-              }}
-            >
-              {link}
-              {submenuPanel(item, key)}
-            </span>
+            <React.Fragment key={key}>
+              {index > 0 && <MenuSeparator settings={separator} />}
+              {entry}
+            </React.Fragment>
           );
         })}
+
+      {/*
+        Outside the arm split on purpose: the band decorates the ROW, not the
+        entries, so a designer who replaced the rows with an item template
+        still gets to finish the row off.
+      */}
+      <MenuTrailingFill settings={separator} />
     </nav>
   );
 };