@defra/interactive-map 0.0.41-alpha → 0.0.43-fmp-experimental

package/plugins/map-key/src/components/Key/KeySvgRamp.jsx

@@ -0,0 +1,13 @@
+import { getValueForStyle } from '../../../../../src/utils/getValueForStyle.js'
+
+export const KeySvgRamp = ({ mapStyle, keyDefinition }) => {
+  const { style } = keyDefinition
+  const fill = getValueForStyle(style.fill, mapStyle.id)
+  const stroke = getValueForStyle(style.fill, mapStyle.id)
+
+  return (
+    <svg viewBox='0 0 5 5' preserveAspectRatio='none' fill={fill} stroke={stroke} strokeWidth='1'>
+      <path d='M0 0h5v5H0z' />
+    </svg>
+  )
+}

package/plugins/map-key/src/components/Key/KeySvgRamp.test.jsx

@@ -0,0 +1,43 @@
+import { render } from '@testing-library/react'
+import { KeySvgRamp } from './KeySvgRamp'
+import { getValueForStyle } from '../../../../../src/utils/getValueForStyle.js'
+
+jest.mock('../../../../../src/utils/getValueForStyle.js', () => ({
+  getValueForStyle: jest.fn()
+}))
+
+const mapStyle = { id: 'outdoor' }
+const keyDefinition = { style: { fill: { outdoor: '#3d9', dark: '#1a5' } } }
+
+beforeEach(() => {
+  getValueForStyle.mockImplementation((value) =>
+    typeof value === 'object' ? value.outdoor : value
+  )
+})
+
+describe('KeySvgRamp', () => {
+  it('renders an svg element', () => {
+    const { container } = render(<KeySvgRamp mapStyle={mapStyle} keyDefinition={keyDefinition} />)
+    expect(container.querySelector('svg')).toBeTruthy()
+  })
+
+  it('passes the resolved fill to the svg', () => {
+    const { container } = render(<KeySvgRamp mapStyle={mapStyle} keyDefinition={keyDefinition} />)
+    expect(container.querySelector('svg').getAttribute('fill')).toBe('#3d9')
+  })
+
+  it('passes the resolved stroke to the svg', () => {
+    const { container } = render(<KeySvgRamp mapStyle={mapStyle} keyDefinition={keyDefinition} />)
+    expect(container.querySelector('svg').getAttribute('stroke')).toBe('#3d9')
+  })
+
+  it('uses preserveAspectRatio none', () => {
+    const { container } = render(<KeySvgRamp mapStyle={mapStyle} keyDefinition={keyDefinition} />)
+    expect(container.querySelector('svg').getAttribute('preserveAspectRatio')).toBe('none')
+  })
+
+  it('renders a path child', () => {
+    const { container } = render(<KeySvgRamp mapStyle={mapStyle} keyDefinition={keyDefinition} />)
+    expect(container.querySelector('path')).toBeTruthy()
+  })
+})

package/plugins/map-key/src/components/Key/KeySvgRect.jsx

@@ -1,18 +1,11 @@
-import { useEffect, useState } from 'react'
 import { getValueForStyle } from '../../../../../src/utils/getValueForStyle.js'
 import { svgProps, SVG_SIZE } from './svgProperties.js'
 
 export const KeySvgRect = ({ mapStyle, keyDefinition }) => {
-  const [strokeWidth, setStrokeWidth] = useState(2)
-  const [fill, setFill] = useState('#ff0000')
-  const [stroke, setStroke] = useState('#ff0000')
-
-  useEffect(() => {
-    const { style } = keyDefinition
-    setStrokeWidth(style.strokeWidth)
-    setFill(getValueForStyle(style.fill, mapStyle.id))
-    setStroke(getValueForStyle(style.stroke, mapStyle.id))
-  }, [mapStyle.id, keyDefinition])
+  const { style } = keyDefinition
+  const strokeWidth = style.strokeWidth
+  const fill = getValueForStyle(style.fill, mapStyle.id)
+  const stroke = getValueForStyle(style.stroke, mapStyle.id)
 
   return (
     <svg {...svgProps}>

package/plugins/map-key/src/components/Key/KeySvgSymbol.jsx

@@ -1,19 +1,13 @@
-import { useEffect, useState } from 'react'
 import { getSymbolStyleColors, getSymbolViewBox } from '../../../../../src/utils/symbolUtils.js'
 import { svgSymbolProps } from './svgProperties.js'
 import { symbolRegistry } from '../../registry/index.js'
 
 export const KeySvgSymbol = ({ keyDefinition, mapStyle, symbolDef }) => {
-  const [resolvedSvg, setResolvedSvg] = useState(null)
-  const [viewBox, setViewBox] = useState(null)
-
-  useEffect(() => {
-    const { style } = keyDefinition
-    const mapColorScheme = mapStyle?.appColorScheme ?? 'light'
-    const keyMapStyle = { ...mapStyle, mapColorScheme }
-    setResolvedSvg(symbolRegistry.resolve(symbolDef, getSymbolStyleColors(style), keyMapStyle))
-    setViewBox(getSymbolViewBox(style, symbolDef))
-  }, [mapStyle, keyDefinition])
+  const { style } = keyDefinition
+  const mapColorScheme = mapStyle?.appColorScheme ?? 'light'
+  const keyMapStyle = { ...mapStyle, mapColorScheme }
+  const resolvedSvg = symbolRegistry.resolve(symbolDef, getSymbolStyleColors(style), keyMapStyle)
+  const viewBox = getSymbolViewBox(style, symbolDef)
 
   if (!(resolvedSvg && viewBox)) {
     return null

package/plugins/map-key/src/components/Key/KeySvgSymbol.test.jsx

@@ -76,4 +76,16 @@ describe('KeySvgSymbol', () => {
     const callArg = mockResolve.mock.calls[0][2]
     expect(callArg.mapColorScheme).toBe('dark')
   })
+
+  it('renders nothing when resolve returns falsy', () => {
+    mockResolve.mockReturnValue(null)
+    const { container } = render(<KeySvgSymbol {...defaultProps} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders nothing when getSymbolViewBox returns falsy', () => {
+    getSymbolViewBox.mockReturnValue(null)
+    const { container } = render(<KeySvgSymbol {...defaultProps} />)
+    expect(container.firstChild).toBeNull()
+  })
 })

package/plugins/map-key/src/components/Key/MapKey.jsx

@@ -8,9 +8,12 @@ export function MapKey ({
   pluginConfig: { noKeyItemText },
   services: { eventBus }
 }) {
-  const [keyGroups, setKeyGroups] = useState([])
-  const [hasGroups, setHasGroups] = useState(false)
   const [datasetRegistry, setDatasetRegistry] = useState(getDatasetRegistry())
+  // Lazily seed from the registry (already populated whenever the key is opened after
+  // datasets:ready) so the first paint shows real content instead of flashing the empty
+  // state while the effect below catches up on the next tick.
+  const [keyGroups, setKeyGroups] = useState(() => datasetRegistry?.keyItems().items ?? [])
+  const [hasGroups, setHasGroups] = useState(() => datasetRegistry?.keyItems().hasGroups ?? false)
 
   const getKeyItems = () => {
     const { items, hasGroups: _hasGroups } = datasetRegistry.keyItems()

package/plugins/map-key/src/components/Key/MapKey.test.jsx

@@ -6,16 +6,21 @@ jest.mock('../../registry/index.js', () => ({
   getDatasetRegistry: jest.fn()
 }))
 
+// eslint-disable-next-line no-var -- jest.mock factories may only reference vars prefixed "mock"
+var mockKeyRenderCount = 0
 jest.mock('./Key.jsx', () => ({
-  Key: ({ noKeyItemText, keyGroups, hasGroups, mapStyle }) => (
-    <div
-      data-testid='key'
-      data-no-key-item-text={noKeyItemText}
-      data-has-groups={String(hasGroups)}
-      data-map-style-id={mapStyle.id}
-      data-key-groups-length={keyGroups.length}
-    />
-  )
+  Key: ({ noKeyItemText, keyGroups, hasGroups, mapStyle }) => {
+    mockKeyRenderCount++
+    return (
+      <div
+        data-testid='key'
+        data-no-key-item-text={noKeyItemText}
+        data-has-groups={String(hasGroups)}
+        data-map-style-id={mapStyle.id}
+        data-key-groups-length={keyGroups.length}
+      />
+    )
+  }
 }))
 
 const makeEventBus = () => {
@@ -44,6 +49,7 @@ const baseProps = () => ({
 beforeEach(() => {
   jest.clearAllMocks()
   eventBus = makeEventBus()
+  mockKeyRenderCount = 0
 })
 
 describe('MapKey', () => {
@@ -84,6 +90,15 @@ describe('MapKey', () => {
       expect(getByTestId('key').dataset.hasGroups).toBe('true')
     })
 
+    // Regression: when the registry is already populated at mount (e.g. reopening the key
+    // panel after datasets:ready), Key must render with real data straight away rather than
+    // painting the empty state first and flashing to the real content once the mount effect
+    // catches up — see MapKey.jsx's lazy useState initializers.
+    it('renders Key only once, already carrying the real items, instead of flashing empty first', () => {
+      render(<MapKey {...baseProps()} />)
+      expect(mockKeyRenderCount).toBe(1)
+    })
+
     it('registers menu:changed and datasets:changed listeners', () => {
       render(<MapKey {...baseProps()} />)
       expect(eventBus.on).toHaveBeenCalledWith('menu:changed', expect.any(Function))
@@ -99,18 +114,20 @@ describe('MapKey', () => {
 
     it('refreshes key items when datasets:changed fires', () => {
       render(<MapKey {...baseProps()} />)
+      const callsAtMount = registry.keyItems.mock.calls.length
       const onDatasetsChanged = eventBus.on.mock.calls.find(([e]) => e === 'datasets:changed')[1]
       act(() => { onDatasetsChanged() })
-      expect(registry.keyItems).toHaveBeenCalledTimes(2)
+      expect(registry.keyItems).toHaveBeenCalledTimes(callsAtMount + 1)
     })
 
     it('invalidates and refreshes key items when menu:changed fires', () => {
       render(<MapKey {...baseProps()} />)
+      const callsAtMount = registry.keyItems.mock.calls.length
       const onMenuChanged = eventBus.on.mock.calls.find(([e]) => e === 'menu:changed')[1]
       const menuState = { someKey: 'value' }
       act(() => { onMenuChanged(menuState) })
       expect(registry.invalidateKeyItemsOnMenuStateChange).toHaveBeenCalledWith(menuState)
-      expect(registry.keyItems).toHaveBeenCalledTimes(2)
+      expect(registry.keyItems).toHaveBeenCalledTimes(callsAtMount + 1)
     })
   })
 

package/plugins/map-key/src/components/Key/svgProperties.js

@@ -7,7 +7,7 @@ export const svgProps = {
   width: SVG_SIZE,
   height: SVG_SIZE,
   viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`,
-  className: 'am-c-map-key-symbol',
+  className: 'im-c-map-key-symbol',
   'aria-hidden': 'true',
   focusable: 'false'
 }
@@ -16,5 +16,5 @@ export const svgSymbolProps = {
   ...svgProps,
   width: SVG_SYMBOL_SIZE,
   height: SVG_SYMBOL_SIZE,
-  className: 'am-c-map-key-symbol am-c-map-key-symbol--point'
+  className: 'im-c-map-key-symbol im-c-map-key-symbol--point'
 }

package/plugins/map-key/src/components/Key/svgProperties.test.js

@@ -25,7 +25,7 @@ describe('svgProps', () => {
   })
 
   it('has the correct className', () => {
-    expect(svgProps.className).toBe('am-c-map-key-symbol')
+    expect(svgProps.className).toBe('im-c-map-key-symbol')
   })
 
   it('is aria-hidden', () => {
@@ -55,7 +55,7 @@ describe('svgSymbolProps', () => {
   })
 
   it('className includes the base class and a modifier', () => {
-    expect(svgSymbolProps.className).toContain('am-c-map-key-symbol')
+    expect(svgSymbolProps.className).toContain('im-c-map-key-symbol')
     expect(svgSymbolProps.className).toContain('--point')
   })
 })

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/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
@@ -59,6 +60,8 @@ const buildBodyProps = ({ bodyRef, panelBodyClass, isBodyScrollable, elementId }
 // 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>)
@@ -66,9 +69,44 @@ const BodyContent = ({ items, WrappedChild, props, children }) => { // NOSONAR
   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, items, 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()
 
@@ -141,13 +179,17 @@ export const Panel = ({ panelId, panelConfig, props, focusOnOpen, WrappedChild,
         </button>
       )}
 
-      {innerHtmlProp
-        ? <div {...bodyProps} dangerouslySetInnerHTML={innerHtmlProp} /> // nosonar
-        : (
-          <div {...bodyProps} data-panel-slot={panelBodySlot}> {/* nosonar */}
-            <BodyContent items={items} WrappedChild={WrappedChild} props={props}>{children}</BodyContent>
-          </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

@@ -59,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;
+}
 
-    &[data-focus-visible="true"] {
-        outline: var(--scrollable-outline);
-        outline-offset: var(--scrollable-outline-offset);
-        box-shadow: var(--scrollable-box-shadow);
+// 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);
+}
+
+// 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;
     }
 }
 

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

@@ -69,7 +69,7 @@ describe('Panel', () => {
       const { container } = renderPanel()
 
       // 2. Target by class to avoid role collision with the parent panel
-      const body = container.querySelector('.im-c-panel__body')
+      const body = container.querySelector('[data-panel-slot]')
 
       expect(body).toHaveAttribute('tabIndex', '0')
       expect(body).toHaveAttribute('role', 'region')
@@ -219,7 +219,7 @@ describe('Panel', () => {
 
     it('stamps data-panel-slot on the items-capable body, for controls DOM-projected via the JS API', () => {
       const { container } = renderPanel({}, { items: [{ id: 'a', element: <p>Item</p> }] })
-      const body = container.querySelector('.im-c-panel__body')
+      const body = container.querySelector('[data-panel-slot]')
       expect(body).toHaveAttribute('data-panel-slot', 'settings-panel')
     })
 
@@ -228,5 +228,84 @@ describe('Panel', () => {
       const body = container.querySelector('.im-c-panel__body')
       expect(body).not.toHaveAttribute('data-panel-slot')
     })
+
+    describe('tabs', () => {
+      const tabs = [
+        { name: 'First', items: [{ id: 'a', element: <p>First content</p> }] },
+        { name: 'Second', items: [{ id: 'b', element: <p>Second content</p> }] }
+      ]
+
+      it('renders items grouped into tabs when the tabs prop is provided', () => {
+        renderPanel({}, { tabs })
+        expect(screen.getByRole('tablist')).toBeInTheDocument()
+        expect(screen.getByRole('tab', { name: 'First' })).toBeInTheDocument()
+        expect(screen.getByRole('tab', { name: 'Second' })).toBeInTheDocument()
+        expect(screen.getByText('First content')).toBeInTheDocument()
+      })
+
+      it('switches tab content when a different tab is activated', () => {
+        renderPanel({}, { tabs })
+        fireEvent.click(screen.getByRole('tab', { name: 'Second' }))
+        expect(screen.getByText('Second content')).toBeVisible()
+        expect(screen.getByText('First content')).not.toBeVisible()
+      })
+
+      it('prefers tabs over items/WrappedChild/children when provided', () => {
+        renderPanel({}, {
+          tabs,
+          items: [{ id: 'x', element: <p>Flat item</p> }],
+          WrappedChild: () => <p>Wrapped</p>,
+          children: <p>Child content</p>
+        })
+        expect(screen.getByText('First content')).toBeInTheDocument()
+        expect(screen.queryByText('Flat item')).not.toBeInTheDocument()
+        expect(screen.queryByText('Wrapped')).not.toBeInTheDocument()
+        expect(screen.queryByText('Child content')).not.toBeInTheDocument()
+      })
+
+      it('keeps the panel body wrapper (padding, data-panel-slot) around the whole tabs block', () => {
+        const { container } = renderPanel({}, { tabs })
+        const body = container.querySelector('[data-panel-slot]')
+        expect(body).toHaveAttribute('data-panel-slot', 'settings-panel')
+        expect(body.querySelector('[role="tablist"]')).not.toBeNull()
+        expect(body.querySelector('[role="tabpanel"]')).not.toBeNull()
+      })
+
+      it('keeps the outer wrapper as the normal, unconditional im-c-panel__body — the tablist and tabpanel pick up their inset by being nested inside it, same as any other panel content', () => {
+        const { container } = renderPanel({}, { tabs })
+        const body = container.querySelector('[data-panel-slot]')
+        expect(body).toHaveClass('im-c-panel__body')
+      })
+
+      it('keeps the tablist outside the scrollable tabpanel, so it does not scroll away with long tab content', () => {
+        const { container } = renderPanel({}, { tabs })
+        const tabpanel = container.querySelector('[role="tabpanel"]')
+        expect(tabpanel.querySelector('[role="tablist"]')).toBeNull()
+      })
+
+      it('places the tablist before the tabpanel in DOM order, so keyboard focus reaches it first', () => {
+        const { container } = renderPanel({}, { tabs })
+        const tablist = container.querySelector('[role="tablist"]')
+        const tabpanel = container.querySelector('[role="tabpanel"]')
+        // DOCUMENT_POSITION_FOLLOWING (4) means `tabpanel` comes after `tablist`
+        // eslint-disable-next-line no-bitwise
+        expect(tablist.compareDocumentPosition(tabpanel) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+      })
+
+      it('moves the scrollable-region treatment onto the tabpanel itself, not the outer wrapper', () => {
+        useIsScrollable.mockReturnValue(true)
+
+        const { container } = renderPanel({}, { tabs })
+        const body = container.querySelector('[data-panel-slot]')
+        const tabpanel = screen.getByRole('tabpanel')
+
+        expect(tabpanel).toHaveAttribute('tabIndex', '0')
+        expect(body).not.toHaveAttribute('tabIndex')
+        expect(body).not.toHaveAttribute('role', 'region')
+        expect(tabpanel).not.toHaveAttribute('data-panel-slot')
+
+        useIsScrollable.mockReturnValue(false)
+      })
+    })
   })
 })