@defra/interactive-map 0.0.40-alpha → 0.0.42-alpha

package/providers/maplibre/src/utils/symbolImages.js

@@ -36,10 +36,48 @@ export const anchorToMaplibre = ([ax, ay]) => {
   return (y + (x && y ? '-' : '') + x) || 'center'
 }
 
+// The discrete fraction (0, 0.5 or 1) icon-anchor actually renders a given axis at — the
+// same left/right/top/bottom/center snapping xAnchor/yAnchor above already do, expressed as
+// a number instead of a string so it can be compared against the true, unsnapped fraction.
+const discreteFraction = (a) => {
+  if (a <= ANCHOR_LOW) { return 0 }
+  if (a >= ANCHOR_HIGH) { return 1 }
+  return 0.5
+}
+
+/**
+ * MapLibre's icon-anchor only has 9 discrete positions — anchorToMaplibre above snaps a
+ * fractional anchor to the nearest one, which loses precision for anything off-grid (e.g.
+ * pin's [0.5, 0.9] renders as if it were 1.0/'bottom', shifting the whole icon ~10% of its
+ * height off from where a DOM marker using the same anchor value would place it —
+ * SymbolMarker.jsx positions markers with the exact fraction via CSS margins, with no such
+ * snapping). icon-offset corrects this: the pixel distance, in the icon's own display-space
+ * dimensions (derived from its viewBox), between the true anchor and the discrete one it
+ * snapped to — applied on top of icon-anchor, on both provider and dataset symbol layers.
+ *
+ * @param {number[]} anchor - [x, y] in 0–1 space (the true, unsnapped anchor)
+ * @param {string} viewBox - SVG viewBox string, e.g. '0 0 44 44'
+ * @returns {number[]} [offsetX, offsetY] in pixels, for the icon-offset layout property
+ */
+// Rounded to 2dp: sub-hundredth-of-a-pixel precision is meaningless for rendering, and
+// without it fractions like 0.8 produce float noise (8.799999999999997, not 8.8).
+const round2dp = (n) => Math.round(n * 100) / 100
+
+export const anchorToMaplibreOffset = ([ax, ay], viewBox) => {
+  const [,, width, height] = viewBox.split(' ').map(Number)
+  return [
+    round2dp((discreteFraction(ax) - ax) * width),
+    round2dp((discreteFraction(ay) - ay) * height)
+  ]
+}
+
 /**
  * Register normal, active (both rings) and selected (black ring) symbol images.
  * Skips images that are already registered (safe to call on style change).
- * Updates `map._activeSymbolImageMap` (normal→active) and `map._selectedSymbolImageMap` (normal→selected).
+ * Merges into `map._activeSymbolImageMap` (normal→active) and `map._selectedSymbolImageMap`
+ * (normal→selected) rather than replacing them — more than one caller (e.g. the datasets
+ * and draw plugins) can register symbols on the same map, and each call must add to that
+ * shared registry, not wipe out whatever another caller already registered there.
  *
  * @param {Object} map - MapLibre map instance
  * @param {Object[]} styleArray - an array of symbol configs
@@ -53,8 +91,8 @@ export const addSymbolsToMap = async (map, styleArray, mapStyle, symbolRegistry,
     return
   }
 
-  map._activeSymbolImageMap = {}
-  map._selectedSymbolImageMap = {}
+  map._activeSymbolImageMap ??= {}
+  map._selectedSymbolImageMap ??= {}
 
   await Promise.all(styleArray.flatMap(config => {
     const normalId = symbolRegistry.getSymbolImageId(config, mapStyle, false, pixelRatio)

package/providers/maplibre/src/utils/symbolImages.test.js

@@ -1,4 +1,4 @@
-import { anchorToMaplibre, addSymbolsToMap } from './symbolImages.js'
+import { anchorToMaplibre, anchorToMaplibreOffset, addSymbolsToMap } from './symbolImages.js'
 import { symbolRegistry } from '../../../../src/services/symbolRegistry.js'
 
 beforeAll(() => {
@@ -84,6 +84,36 @@ describe('anchorToMaplibre', () => {
   })
 })
 
+// ─── anchorToMaplibreOffset ───────────────────────────────────────────────────
+
+describe('anchorToMaplibreOffset', () => {
+  const VIEW_BOX = '0 0 44 44'
+
+  it('is zero for an anchor that already sits exactly on a discrete position', () => {
+    expect(anchorToMaplibreOffset([0.5, 0.5], VIEW_BOX)).toEqual([0, 0]) // center
+    expect(anchorToMaplibreOffset([0, 0], VIEW_BOX)).toEqual([0, 0]) // top-left
+    expect(anchorToMaplibreOffset([1, 1], VIEW_BOX)).toEqual([0, 0]) // bottom-right
+  })
+
+  it('corrects for pin-style [0.5, 0.9] snapping to bottom (1.0)', () => {
+    expect(anchorToMaplibreOffset([0.5, 0.9], VIEW_BOX)).toEqual([0, 4.4])
+  })
+
+  it('corrects both axes when both are off-grid', () => {
+    // 0.1 snaps to 'left'/'top' (0), 0.9 snaps to 'right'/'bottom' (1)
+    expect(anchorToMaplibreOffset([0.1, 0.1], VIEW_BOX)).toEqual([-4.4, -4.4])
+    expect(anchorToMaplibreOffset([0.9, 0.9], VIEW_BOX)).toEqual([4.4, 4.4])
+  })
+
+  it('still corrects a value inside the centre band that is not exactly 0.5 — the whole band snaps to 0.5, not just its edges', () => {
+    expect(anchorToMaplibreOffset([0.4, 0.6], VIEW_BOX)).toEqual([4.4, -4.4])
+  })
+
+  it('scales with the viewBox, not just the anchor fraction', () => {
+    expect(anchorToMaplibreOffset([0.5, 0.9], '0 0 100 100')).toEqual([0, 10])
+  })
+})
+
 // ─── addSymbolsToMap ──────────────────────────────────────────────────────────
 
 const makeMap = (existingIds = []) => ({
@@ -103,13 +133,17 @@ describe('addSymbolsToMap — registration', () => {
     expect(map.addImage).not.toHaveBeenCalled()
   })
 
-  it('resets _activeSymbolImageMap and _selectedSymbolImageMap before processing', async () => {
+  it('merges into existing _activeSymbolImageMap/_selectedSymbolImageMap rather than replacing them', async () => {
+    // More than one caller (datasets, draw, ...) can register symbols on the same map —
+    // a later call must add to the shared registry, not wipe an earlier caller's entries.
     const map = makeMap()
-    map._activeSymbolImageMap = { stale: 'entry' }
-    map._selectedSymbolImageMap = { stale: 'entry' }
+    map._activeSymbolImageMap = { 'other-normal-id': 'other-active-id' }
+    map._selectedSymbolImageMap = { 'other-normal-id': 'other-selected-id' }
     await addSymbolsToMap(map, [{ symbol: 'pin' }], mapStyle, symbolRegistry)
-    expect(map._activeSymbolImageMap).not.toHaveProperty('stale')
-    expect(map._selectedSymbolImageMap).not.toHaveProperty('stale')
+    expect(map._activeSymbolImageMap['other-normal-id']).toBe('other-active-id')
+    expect(map._selectedSymbolImageMap['other-normal-id']).toBe('other-selected-id')
+    const normalId = symbolRegistry.getSymbolImageId({ symbol: 'pin' }, mapStyle, false)
+    expect(map._activeSymbolImageMap).toHaveProperty(normalId)
   })
 
   it('calls addImage for normal, active and selected variants', async () => {

package/rollup.esm.mjs

@@ -182,7 +182,7 @@ const createESMConfig = (entryPath, outDir, isCore = false, manualChunks = null,
         open: false,
         gzipSize: true
       })]
-      : [])
+        : [])
     ],
 
     output: {
@@ -303,6 +303,16 @@ const ALL_BUILDS = [
     entryPath: './plugins/beta/frame/src/index.js',
     outDir: 'plugins/beta/frame/dist/esm',
     manualChunks: (id) => id.includes('/manifest') ? 'im-frame-plugin' : undefined
+  },
+  {
+    entryPath: './plugins/map-key/src/index.js',
+    outDir: 'plugins/map-key/dist/esm',
+    manualChunks: (id) => id.includes('/manifest') ? 'im-map-key-plugin' : undefined
+  },
+  {
+    entryPath: './plugins/menu/src/index.js',
+    outDir: 'plugins/menu/dist/esm',
+    manualChunks: (id) => id.includes('/manifest') ? 'im-menu-plugin' : undefined
   }
 ]
 

package/src/App/components/Actions/Actions.test.jsx

@@ -1,11 +1,16 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { Actions } from './Actions.jsx'
+import { mapButtons } from '../../renderer/mapButtons.js'
 import * as AppContext from '../../store/appContext' // import the module to mock
 
 // Simple child component to handle isHidden
 const TestChild = ({ isHidden, children, ...props }) => <div {...props}>{children}</div>
 
+jest.mock('../MapButton/MapButton.jsx', () => ({
+  MapButton: ({ isHidden }) => <button data-testid='map-button' hidden={isHidden} />
+}))
+
 const ACTIONS_SELECTOR = '.im-c-actions'
 const HIDDEN_CLASS = 'im-c-actions--hidden'
 
@@ -80,4 +85,46 @@ describe('Actions component', () => {
     const container = screen.getByTestId('child1').closest(ACTIONS_SELECTOR)
     expect(container).toHaveClass(HIDDEN_CLASS)
   })
+
+  // Integration with the real mapButtons() output, not just the TestChild stand-in above —
+  // guards the isHidden/variant contract at the actual seam between the two modules, since
+  // mapButtons.js's own unit tests can't catch a break here on their own.
+  describe('with real mapButtons() output', () => {
+    const evaluateProp = (prop) => (typeof prop === 'function' ? prop() : prop)
+    const appConfig = { id: 'test' }
+    const baseAppState = {
+      breakpoint: 'desktop',
+      mode: 'view',
+      isFullscreen: true,
+      openPanels: {},
+      dispatch: jest.fn(),
+      disabledButtons: new Set(),
+      hiddenButtons: new Set(),
+      pressedButtons: new Set(),
+      expandedButtons: new Set(),
+      panelConfig: {},
+      layoutRefs: { viewportRef: { current: { focus: jest.fn() } } }
+    }
+
+    const renderActionsWith = (appState) => {
+      const items = mapButtons({ slot: 'actions', appState, appConfig, evaluateProp })
+      return render(<Actions slot='actions'>{items.map(i => i.element)}</Actions>)
+    }
+
+    it('shows the actions bar when a real mapButtons() button is visible', () => {
+      const appState = { ...baseAppState, buttonConfig: { cancel: { label: 'Cancel', desktop: { slot: 'actions' } } } }
+      renderActionsWith(appState)
+      expect(screen.getByTestId('map-button').closest(ACTIONS_SELECTOR)).not.toHaveClass(HIDDEN_CLASS)
+    })
+
+    it('hides the actions bar when the only real mapButtons() button is hidden', () => {
+      const appState = {
+        ...baseAppState,
+        hiddenButtons: new Set(['cancel']),
+        buttonConfig: { cancel: { label: 'Cancel', desktop: { slot: 'actions' } } }
+      }
+      renderActionsWith(appState)
+      expect(screen.getByTestId('map-button').closest(ACTIONS_SELECTOR)).toHaveClass(HIDDEN_CLASS)
+    })
+  })
 })

package/src/App/components/Hints/Hints.test.jsx

@@ -52,6 +52,19 @@ describe('Hints — rendering', () => {
     expect(desc.innerHTML).toBe('Shift + ?')
   })
 
+  it('appends the move-controls hint text when enableMoveControls is true', () => {
+    const mainEl = setup()
+    useConfig.mockReturnValue({
+      id: 'test-map',
+      keyboardHintText: '<kbd>Shift</kbd> + <kbd>?</kbd>',
+      enableMoveControls: true,
+      moveControlsHintText: '<kbd>Arrow keys</kbd> to move'
+    })
+    render(<Hints />)
+    const desc = mainEl.querySelector('#test-map-keyboard-desc')
+    expect(desc.innerHTML).toBe('Shift + ? Arrow keys to move')
+  })
+
   it('renders no hint content when there is no active hint', () => {
     const mainEl = setup()
     render(<Hints />)

package/src/App/components/KeyboardHelp/KeyboardHelp.jsx

@@ -3,6 +3,9 @@ import React from 'react'
 import { useConfig } from '../../store/configContext'
 import { useApp } from '../../store/appContext.js'
 import { Tabs } from '../Tabs/Tabs.jsx'
+import { groupIntoTabs } from '../../renderer/groupIntoTabs.js'
+
+const DEFAULT_GROUP = 'Navigate'
 
 const ShortcutList = ({ items }) => (
   <dl className='im-c-keyboard-help__list'>
@@ -15,26 +18,22 @@ const ShortcutList = ({ items }) => (
   </dl>
 )
 
-const buildGroupMap = (shortcuts) => shortcuts.reduce((acc, shortcut) => {
-  const group = shortcut.group || 'Navigate'
-  if (!acc[group]) {
-    acc[group] = []
-  }
-  acc[group].push(shortcut)
-  return acc
-}, {})
-
-const getDefaultTab = (groupEntries, context) => {
-  const exactMatch = groupEntries.find(([, items]) =>
-    items.some(s => (s.context ?? 'viewport') === context)
+/**
+ * Picks which tab should be active on open: the first tab containing a shortcut whose own
+ * context matches exactly, else the first tab containing a global-context shortcut, else
+ * just the first tab. Domain-specific to keyboard shortcuts — not part of groupIntoTabs.
+ */
+const getDefaultTab = (tabs, context) => {
+  const exactMatch = tabs.find(tab =>
+    tab.items.some(({ shortcut }) => (shortcut.context ?? 'viewport') === context)
   )
   if (exactMatch) {
-    return exactMatch[0]
+    return exactMatch.name
   }
-  const globalMatch = groupEntries.find(([, items]) =>
-    items.some(s => s.context === 'global')
+  const globalMatch = tabs.find(tab =>
+    tab.items.some(({ shortcut }) => shortcut.context === 'global')
   )
-  return globalMatch?.[0] ?? groupEntries[0][0]
+  return globalMatch?.name ?? tabs[0].name
 }
 
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
@@ -46,10 +45,13 @@ export const KeyboardHelp = ({ context = 'viewport' }) => { // NOSONAR: project
   const shortcuts = listboxIsActive
     ? allShortcuts
     : allShortcuts.filter(s => s.context !== 'listbox')
-  const groupMap = buildGroupMap(shortcuts)
-  const groupEntries = Object.entries(groupMap)
 
-  if (groupEntries.length <= 1) {
+  const tabs = groupIntoTabs({
+    items: shortcuts.map(shortcut => ({ id: shortcut.id, order: 0, tab: shortcut.group, shortcut })),
+    fallbackLabel: DEFAULT_GROUP
+  })
+
+  if (!tabs) {
     return (
       <div className='im-c-keyboard-help'>
         <ShortcutList items={shortcuts} />
@@ -57,14 +59,14 @@ export const KeyboardHelp = ({ context = 'viewport' }) => { // NOSONAR: project
     )
   }
 
-  const tabs = groupEntries.map(([name, items]) => ({
-    name,
-    content: <ShortcutList items={items} />
+  const tabProps = tabs.map(tab => ({
+    name: tab.name,
+    content: <ShortcutList items={tab.items.map(({ shortcut }) => shortcut)} />
   }))
 
   return (
     <div className='im-c-keyboard-help'>
-      <Tabs tabs={tabs} defaultTab={getDefaultTab(groupEntries, context)} />
+      <Tabs tabs={tabProps} defaultTab={getDefaultTab(tabs, context)} />
     </div>
   )
 }

package/src/App/components/KeyboardHelp/KeyboardHelp.test.jsx

@@ -116,11 +116,11 @@ describe('KeyboardHelp — tabs', () => {
     expect(screen.getByRole('tab', { name: 'Group A' })).toHaveAttribute('aria-selected', 'true')
   })
 
-  it('shows only the active tab panel content', () => {
+  it('shows only the active tab panel content — the inactive one stays in the DOM (so its aria-controls target exists) but hidden', () => {
     getKeyboardShortcuts.mockReturnValue(allShortcuts)
     render(<KeyboardHelp context='viewport' />)
-    expect(screen.getByText('Move')).toBeInTheDocument()
-    expect(screen.queryByText('Select')).not.toBeInTheDocument()
+    expect(screen.getByText('Move')).toBeVisible()
+    expect(screen.getByText('Select')).not.toBeVisible()
   })
 
   it('switches tab and content on click', () => {
@@ -128,8 +128,8 @@ describe('KeyboardHelp — tabs', () => {
     render(<KeyboardHelp context='viewport' />)
     fireEvent.click(screen.getByRole('tab', { name: SELECT_FEATURES_GROUP }))
     expect(screen.getByRole('tab', { name: SELECT_FEATURES_GROUP })).toHaveAttribute('aria-selected', 'true')
-    expect(screen.getByText('Select')).toBeInTheDocument()
-    expect(screen.queryByText('Move')).not.toBeInTheDocument()
+    expect(screen.getByText('Select')).toBeVisible()
+    expect(screen.getByText('Move')).not.toBeVisible()
   })
 
   it('ungrouped shortcuts default to Navigate group', () => {
@@ -141,6 +141,23 @@ describe('KeyboardHelp — tabs', () => {
     fireEvent.click(screen.getByRole('tab', { name: DEFAULT_GROUP }))
     expect(screen.getByText('No group')).toBeInTheDocument()
   })
+
+  it('merges group names that differ only by case/whitespace into one tab (groupIntoTabs)', () => {
+    getKeyboardShortcuts.mockReturnValue([
+      { id: 'a', group: 'Select Features', context: 'listbox', title: 'Shortcut A', command: '<kbd>Ctrl+A</kbd>' },
+      { id: 'b', group: 'select features', context: 'listbox', title: 'Shortcut B', command: '<kbd>Ctrl+B</kbd>' },
+      ...VIEWPORT_SHORTCUTS
+    ])
+    render(<KeyboardHelp context='listbox' />)
+    // Two groups present (Select Features, Navigate) — not one, so tabs render at all
+    expect(screen.getAllByRole('tab')).toHaveLength(2)
+    // First-encountered member's raw group string wins as the tab's displayed name
+    const tab = screen.getByRole('tab', { name: 'Select Features' })
+    expect(tab).toBeInTheDocument()
+    fireEvent.click(tab)
+    expect(screen.getByText('Shortcut A')).toBeVisible()
+    expect(screen.getByText('Shortcut B')).toBeVisible()
+  })
 })
 
 // ─── listboxIsActive filtering ────────────────────────────────────────────────

package/src/App/components/MoveControls/MoveControls.module.scss

@@ -46,6 +46,7 @@
 .im-c-move-controls__directions .im-c-button-wrapper--nudge-step-toggle {
     grid-column: 2;
     grid-row: 2;
+    z-index: 1;
 }
 
 .im-c-move-controls__directions .im-c-map-button--pan-up svg {
@@ -66,24 +67,49 @@
 // express a plus-shaped grid where the centre button touches all four neighbours —
 // clip-path is set directly per button instead, clipping only the side(s) where it
 // touches another button and leaving the exposed side(s) showing the shadow as normal.
-.im-c-move-controls__directions .im-c-button-wrapper--pan-up .im-c-map-button::before {
-    clip-path: inset(-20px -20px 0 -20px); // touches nudge-step-toggle below
+.im-c-move-controls__directions .im-c-button-wrapper--pan-up .im-c-map-button {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    &::before {
+        clip-path: inset(-20px -20px 0 -20px); // touches nudge-step-toggle below
+    }
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--pan-left .im-c-map-button::before {
-    clip-path: inset(-20px 0 -20px -20px); // touches nudge-step-toggle to the right
+.im-c-move-controls__directions .im-c-button-wrapper--pan-left .im-c-map-button {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    &::before {
+        clip-path: inset(-20px 0 -20px -20px); // touches nudge-step-toggle to the right
+    }
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--pan-right .im-c-map-button::before {
-    clip-path: inset(-20px -20px -20px 0); // touches nudge-step-toggle to the left
+.im-c-move-controls__directions .im-c-button-wrapper--pan-right .im-c-map-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+
+    &::before {
+        clip-path: inset(-20px -20px -20px 0); // touches nudge-step-toggle to the left
+    }
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--pan-down .im-c-map-button::before {
-    clip-path: inset(0 -20px -20px -20px); // touches nudge-step-toggle above
+.im-c-move-controls__directions .im-c-button-wrapper--pan-down .im-c-map-button {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+
+    &::before {
+        clip-path: inset(0 -20px -20px -20px); // touches nudge-step-toggle above
+    }
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--nudge-step-toggle .im-c-map-button::before {
-    clip-path: inset(0); // touches all four neighbours
+.im-c-move-controls__directions .im-c-button-wrapper--nudge-step-toggle .im-c-map-button {
+    border-radius: 0;
+    outline: 1px solid var(--button-hover-color);
+
+    &::before {
+        clip-path: inset(0); // touches all four neighbours
+    }
 }
 
 // Same inverted "pressed" treatment already used for actions-slot toggle buttons
@@ -129,3 +155,8 @@
 .im-c-move-controls__zoom .im-c-button-wrapper--nudge-zoom-out .im-c-map-button {
     @include tools.border-focus-corner-override($corners: 'right');
 }
+
+// App dark modifiers
+.im-o-app--dark-app .im-c-move-controls__directions .im-c-button-wrapper--nudge-step-toggle .im-c-map-button {
+    outline-offset: -1px;
+}

package/src/App/components/Panel/Panel.jsx

@@ -5,6 +5,7 @@ import { stringToKebab } from '../../../utils/stringToKebab.js'
 import { useModalPanelBehaviour } from '../../hooks/useModalPanelBehaviour.js'
 import { useIsScrollable } from '../../hooks/useIsScrollable.js'
 import { Icon } from '../Icon/Icon'
+import { Tabs } from '../Tabs/Tabs.jsx'
 
 const computePanelState = (bpConfig, triggeringElement, focus, focusOnOpen) => {
   const isAside = bpConfig.slot === 'side' && bpConfig.open && !bpConfig.modal
@@ -56,9 +57,56 @@ const buildBodyProps = ({ bodyRef, panelBodyClass, isBodyScrollable, elementId }
   'aria-labelledby': isBodyScrollable ? `${elementId}-label` : undefined
 })
 
+// Renders the panel body's content: an ordered list of items (own content plus any
+// controls injected via the `<panelId>-panel` slot convention), or the legacy single
+// WrappedChild/children shape for callers that don't build an items list (e.g. HtmlElementHost).
+// Tabbed content is handled separately by Panel itself — see the tabs handling below — since
+// the tablist needs to render outside this component's scrollable body, not inside it.
+const BodyContent = ({ items, WrappedChild, props, children }) => { // NOSONAR
+  if (items) {
+    return items.map(item => <React.Fragment key={item.id}>{item.element}</React.Fragment>)
+  }
+  return WrappedChild ? <WrappedChild {...props} /> : children
+}
+
+// Chooses between the three body shapes: static html, tabbed, or the flat BodyContent above.
+// .im-c-panel__body (bodyProps) always wraps everything, completely unchanged — same padding/
+// overflow/box role it's always had, which is also what the tablist and tabpanel need to pick
+// up their own inset from by simply being nested inside it. Only the scrollable-region
+// behaviour (ref/tabIndex/role/aria-labelledby) moves down onto <Tabs>' own tabpanel div via
+// panelProps when tabbed, since that's the part that should actually scroll/receive focus —
+// the tablist (rendered by <Tabs> itself, ahead of the tabpanel) stays outside that inner
+// scroll boundary so it can't scroll away with long tab content. The tabpanel's own focus ring
+// clearance (so it isn't flush against its content) is a CSS-only concern — see
+// Panel.module.scss's .im-c-tabs__panel override.
+const PanelBody = ({ innerHtmlProp, tabs, items, WrappedChild, props, children, bodyProps, panelBodySlot }) => { // NOSONAR
+  if (innerHtmlProp) {
+    return <div {...bodyProps} dangerouslySetInnerHTML={innerHtmlProp} /> // nosonar
+  }
+  const { className, ...scrollableProps } = bodyProps
+  if (tabs) {
+    return (
+      <div className={className} data-panel-slot={panelBodySlot}>
+        <Tabs
+          tabs={tabs.map(tab => ({
+            name: tab.name,
+            content: tab.items.map(item => <React.Fragment key={item.id}>{item.element}</React.Fragment>)
+          }))}
+          panelProps={scrollableProps}
+        />
+      </div>
+    )
+  }
+  return (
+    <div {...bodyProps} data-panel-slot={panelBodySlot}> {/* nosonar */}
+      <BodyContent items={items} WrappedChild={WrappedChild} props={props}>{children}</BodyContent>
+    </div>
+  )
+}
+
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
 // sonarjs/disable-next-line function-name
-export const Panel = ({ panelId, panelConfig, props, focusOnOpen, WrappedChild, label, html, children, isOpen = true, rootRef }) => {
+export const Panel = ({ panelId, panelConfig, props, focusOnOpen, WrappedChild, items, tabs, label, html, children, isOpen = true, rootRef }) => {
   const { id } = useConfig()
   const { dispatch, breakpoint, layoutRefs, interfaceType } = useApp()
 
@@ -103,6 +151,10 @@ export const Panel = ({ panelId, panelConfig, props, focusOnOpen, WrappedChild,
 
   const panelProps = buildPanelProps({ elementId, shouldFocus, isDialog, isDismissible, isModal, width: bpConfig.width, panelClass, slot: bpConfig.slot })
   const bodyProps = buildBodyProps({ bodyRef, panelBodyClass, isBodyScrollable, elementId })
+  // DOM anchor for controls DOM-projected via the JS/consumer-HTML API — see HtmlElementHost.jsx.
+  // Only present on the items-capable body below: dangerouslySetInnerHTML owns the static-html
+  // body's children, so it can't also host controls injected via the panel-slot convention.
+  const panelBodySlot = `${stringToKebab(panelId)}-panel`
 
   return (
     <div // nosonar
@@ -118,6 +170,7 @@ export const Panel = ({ panelId, panelConfig, props, focusOnOpen, WrappedChild,
 
       {isDismissible && (
         <button
+          type='button'
           aria-label={`Close ${label}`}
           className='im-c-panel__close'
           onClick={handleClose}
@@ -126,13 +179,17 @@ export const Panel = ({ panelId, panelConfig, props, focusOnOpen, WrappedChild,
         </button>
       )}
 
-      {innerHtmlProp
-        ? <div {...bodyProps} dangerouslySetInnerHTML={innerHtmlProp} /> // nosonar
-        : (
-          <div {...bodyProps}> {/* nosonar */}
-            {WrappedChild ? <WrappedChild {...props} /> : children}
-          </div>
-          )}
+      <PanelBody
+        innerHtmlProp={innerHtmlProp}
+        tabs={tabs}
+        items={items}
+        WrappedChild={WrappedChild}
+        props={props}
+        bodyProps={bodyProps}
+        panelBodySlot={panelBodySlot}
+      >
+        {children}
+      </PanelBody>
     </div>
   )
 }

package/src/App/components/Panel/Panel.module.scss

@@ -18,6 +18,7 @@
     min-height: 0;
     min-width: var(--min-panel-width);
     pointer-events: auto;
+    color: var(--foreground-color);
     background-color: var(--background-color);
 }
 
@@ -58,15 +59,39 @@
 .im-c-panel__body {
     padding: 0 var(--panel-margin) var(--panel-margin);
     overflow: auto;
+    // display: flex so a tabbed .im-c-tabs child (see Tabs.module.scss) has a flex context to
+    // size itself within — its tablist keeps its natural height, only its tabpanel grows and
+    // scrolls internally, rather than this whole element (tablist included) scrolling as one.
+    // A single non-tabbed child is unaffected — one flex item in a column sizes the same as a
+    // plain block child would.
+    display: flex;
+    flex-direction: column;
+}
+
+// The tabpanel (see Tabs.module.scss) is its own scroll/focus region nested inside this
+// already-padded wrapper — its content already sits correctly inset just by being nested, but
+// its own border box (where the focus ring is drawn, and where its own overflow: auto clips)
+// would otherwise sit tight against that content, with no room of its own. Reaching out with a
+// negative margin — matching this wrapper's own padding — and re-padding by the same amount
+// gives it that room without moving the content: the negative margin and the padding cancel
+// out visually, but the border box itself is now larger. This is a panel-specific override —
+// <Tabs> used anywhere else would need the same treatment if this clearance matters there too.
+.im-c-panel__body .im-c-tabs__panel {
+    margin: 0 calc(-1 * var(--panel-margin)) calc(-1 * var(--panel-margin));
+    padding: 0 var(--panel-margin) var(--panel-margin);
+}
 
-    &[data-focus-visible="true"] {
-        outline: var(--scrollable-outline);
-        outline-offset: var(--scrollable-outline-offset);
-        box-shadow: var(--scrollable-box-shadow);
+// The scrollable-region focus ring — normally on .im-c-panel__body itself, but when tabbed,
+// the tabpanel (see Tabs.module.scss's .im-c-tabs__panel) is the element that's actually
+// focusable/scrollable instead (see Panel.jsx's PanelBody), so it needs the same treatment.
+.im-c-panel__body[data-focus-visible="true"],
+.im-c-tabs__panel[data-focus-visible="true"] {
+    outline: var(--scrollable-outline);
+    outline-offset: var(--scrollable-outline-offset);
+    box-shadow: var(--scrollable-box-shadow);
 
-        @media (-ms-high-contrast:active), screen and (forced-colors: active) {
-            outline-width: 4px;
-        }
+    @media (-ms-high-contrast:active), screen and (forced-colors: active) {
+        outline-width: 4px;
     }
 }
 
@@ -98,19 +123,28 @@
     );
 }
 
-// When banner heading is hidden we need to align with the close button
-.im-o-app--desktop .im-c-panel--banner.im-c-panel--no-heading {
-    .im-c-panel__close {
-        top: var(--banner-close-button-gap);
-        right: var(--banner-close-button-gap);
+// Banner gets small rounded corners instead of the default square panel look.
+.im-c-panel--banner {
+    &,
+    &::before {
+        border-radius: var(--banner-border-radius);
     }
 
-    .im-c-panel__body--offset {
-        padding-top: 10px;
-        padding-bottom: 10px;
+    &::after {
+        border-radius: calc(var(--banner-border-radius) - 2px);
     }
 }
 
+// No heading means no built-in top spacing, so add it back here.
+.im-c-panel--no-heading .im-c-panel__body {
+    padding-top: var(--panel-margin);
+}
+
+// Ensures the body is tall enough to contain the close button.
+.im-c-panel--no-heading .im-c-panel__body--offset {
+    min-height: calc((var(--panel-close-button-gap) * 2) + var(--button-size));
+}
+
 .im-c-panel__body--offset {
     padding-right: calc(var(--button-size) + var(--divider-gap));
 }